原生javascript实现倒计时功能

最新推荐文章于 2022-03-27 10:43:15 发布

Romantic mystery LH

最新推荐文章于 2022-03-27 10:43:15 发布

阅读量2.7k

点赞数 9

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/qq_45760053/article/details/104308145

版权

首先先写一个布局

<!--倒计时-->
<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <style>
        #numbers p {
            position: absolute;
            font-size: 100px;
            left: 50%;
            top: 30%;
            margin-left: -29px;
            display:none;
        }
    </style>
</head>

<body>
    <div id="numbers">
        <p>3</p>
        <p>2</p>
        <p>1</p>
    </div>
</body>

</html>

用position:absolute使数字重合(display不为none时）

之后开始添加javascipt内容

    <script type="text/javascript">
        window.onload = function () {
            var numbers = document.getElementById('numbers');
            var number = numbers.getElementsByTagName('p');
            var i = 0;
            number[i].style.display = 'block';
            i = 1;
            timer = setInterval(function () {
                if (i != number.length) {
                    number[i - 1].style.display = 'none';
                    number[i].style.display = 'block';
                } else {
                    number[i - 1].style.display = 'none';
                    clearInterval(timer);
                }
                i++;
            }, 1000)
        }
    </script>

倒计时主要通过setInterval()来实现，每1秒刷新一次。那么问题来了，在页面加载完成后一秒，setInterval()中的内容才开始执行，倘若我们需要在打开页面后立马开始倒计时的话，就应先把3这个数字即number[0]展示出来。之后每秒需要显示相应的数字，并将前一个数字隐藏。从1开始，当i的值不为number.length的时候，都执行相同的指令。当i为number.length时，只需将number[2]即1隐藏，并且清除定时器，否则倘若找不到对应的元素，就会出现Uncaught TypeError: Cannot read property ‘style’ of undefined的错误。
至此，倒计时功能完成。
在这里插入图片描述