Question

我在视频https://www.youtube.com/watch?v=rAwaHd1sfOQ&list=LLjkQ5Jo1v2DmL3nR8c2ZvTA&index=2&t=0s后面输入了代码

我想在3-5秒后停止加载动画，因此显示主页我该怎么办？

Answer 1

您拥有的是一个.box，它是您的“加载程序”，而＃site-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>

3-5秒后如何停止加载动画？

1 个答案: