如何在3-5秒后停止加载动画？
如何在3-5秒后停止加载动画？
提问于 2019-04-08 01:04:49
我输入的代码遵循这个视频https://www.youtube.com/watch?v=rAwaHd1sfOQ&list=LLjkQ5Jo1v2DmL3nR8c2ZvTA&index=2&t=0s
我想在3-5秒后停止加载动画，所以出现主页，我该怎么办？
回答 1
Stack Overflow用户
发布于 2019-04-08 02:32:00
你所拥有的是一个站点容器，它是你的'loader‘和# .box -container，它是你站点内容的存放位置。
所以我所做的是在开始访问网站时隐藏网站内容，然后运行计时器，当计时器达到0时，它将删除加载器并使内容网站可见，因此我们有一种加载到网站的错觉
这是javascript
// Time to remove loading object
var min = 3;
var max = 5;
// Time after site content will be visible
var time = generateRandomInteger(min, max);
// Loader object with class '.box'
var loader = document.getElementsByClassName('box');
// Site container
var siteContainer = document.getElementById('site-container');
// Hide site container
siteContainer.style.display = 'none';
// Set interval every 1000ms (one second)
setInterval(countDown, 1000);
/**
* Count down time
*/
function countDown(){
time--;
// Check if object should be removed
if(time <= 0){
// Remove first object that was found having class .box
loader[0].remove();
// Show site content
siteContainer.style.display = 'block';
// Clear interval
clearInterval(countDown);
}
}
/**
* Returns random integer from min to max range
*/
function generateRandomInteger(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}这是我身体内容的一个例子
<body>
<div class='box'>
Content...
</div>
<div id='site-container'>
Site content...
</div>
</body>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/55561587
复制相关文章
相似问题
腾讯云开发者
