JavaScript定时器及案例

两种好用的定时方法

window.setTimeout(调用函数,[延迟的毫秒数]);
window在调用的时候可以省略
延迟的毫秒数可以省略，默认值是0毫秒后调用
调用函数可以写在外面
页面中通常有很多定时器，我们会将定时器赋给变量

window.addEventListener('load', function() {
          var time = setTimeout(fn, 1000);
          function fn() {
                    console.log('这是一个定时器');
          }
          clearTimeout(time);  //清除定时器
})

另一种写法

window.addEventListener('load', function() {
          setTimeout(function() {
               alert('爆炸了');
          }, 5000);
})

另一种写法

window.addEventListener('load', function() {
        setTimeout('fn()', 5000);
        function fn() {
               alert('这是一个定时器');
        }
})   //不提倡这种写法

停止定时器window.clearTimeout()

window.setInterval(调用函数,[延迟的毫秒数]);
window在调用的时候可以省略
延迟的毫秒数可以省略，默认值是0毫秒后调用
调用函数可以写在外面
页面中通常有很多定时器，我们会将定时器赋给变量
反复调用一个函数，每隔一段时间执行相同的代码

window.addEventListener('load', function() {
       setInterval(function() {
               console.log('hh');
       }, 1000);
})

停止计时器window.clearInterval()

案例：距离2020年12月30日00:00:00还有多长时间

<style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 550px;
            margin: 100px auto;
        }
        
        span {
            display: inline-block;
            width: 70px;
            height: 70px;
            background-color: black;
            color: white;
            text-align: center;
            line-height: 70px;
            font-size: 18px;
        }
</style>
</head>

<body>
    <div class="box">距离2020年12月30日00:00:00还有
        <span class="day">天</span>
        <span class="hour">小时</span>
        <span class="minute">分钟</span>
        <span class="second">秒</span>
    </div>
    <script>
        	window.addEventListener('load', function() {
            var day = document.querySelector('.day');
            var hour = document.querySelector('.hour');
            var minute = document.querySelector('.minute');
            var second = document.querySelector('.second');
            var future = +new Date('2020-12-30 00:00:00');  //得到'2020-12-30 00:00:00'的时间戳
            getTime();  //首先调用函数，防止页面刚加载时空白

            function getTime() {
                var now = +new Date();  //得到现在的时间戳
                var ms = (future - now) / 1000;  //得到现在距'2020-12-30 00:00:00'的总秒数
                var Day = parseInt(ms / 60 / 60 / 24);  //得到天数
                var Hour = parseInt(ms / 60 / 60 % 24);  //得到小时数
                var Minute = parseInt(ms / 60 % 60);  //得到分钟数
                var Second = parseInt(ms % 60);  //得到秒数
                day.innerHTML = Day + '天';
                hour.innerHTML = Hour + '时';
                minute.innerHTML = Minute + '分';
                second.innerHTML = Second + '秒';
            }
            var countDown = setInterval(getTime, 1000);  //每隔一秒调用一次定时器
        })
    </script>
</body>

在这里插入图片描述

JavaScript定时器及案例

JavaScript定时器及案例

猜你喜欢