定时器及倒计时效果

热身就犯困

于 2023-05-20 23:28:13 发布

阅读量179

点赞数

文章标签： javascript css 前端

本文链接：https://blog.csdn.net/m0_73805336/article/details/130787345

版权

2.3定时器

（1）setTimeout()

 <script>
        // 1.setTimeout
        // window.setTimeout(调用函数,延时时间);
        // 1.这个window在调用的时候可以省略
        // 2.这个延时时间单位是毫秒，但是可以省略。如果省略默认是0
        // 3.这个调用函数可以直接写函数 还可以写 函数名 还有一个写法 '函数名()'
        // 4.页面中可能有很多个定时器，我们经常给定时器加标识符  （名字）
        // setTimeout(function() {
        //     console.log('时间到了');
        // }, 2000);
        function callback() {
            console.log('baozha'); 
        }
        // setTimeout(callback, 3000);
        setTimeout('callback()', 3000);  //不提倡
        var time1 = setTimeout(callback, 3000);
        var time2 = setTimeout(callback, 5000);
    </script>

setTimeout()也称回调函数callback

普通函数是按照代码顺序直接调用

这个函数需要等待事件，时间到了才去调用这个函数

自动关闭广告的函数：

<img src="图片\2.png" alt="" class="ad">
    <script>
        var ad = document.querySelector('.ad');
        setTimeout(function() {
            ad.style.display = 'none';
        }, 5000);
    </script>

（2）停止setTimeout()定时器

window.clearTimeout(timeoutID)

  <button>点击停止计时器</button>
    <script>
        var btn = document.querySelector('button');
        var timer = setTimeout(function() {
            console.log('爆炸了');
        }, 5000);
        btn.addEventListener('click', function() {
            clearTimeout(timer);
        })
    </script>

(3)setInterval（）

大多和setTimeout()相同，但这个方法重复调用一个函数，每隔这个时间，就去调用一次回调函数

 <script>
        setInterval(function() {
            console.log('继续输出');
        }, 1000);
    </script>

（4）倒计时效果

  <style>
        span {
            display:inline-block;
            width: 50px;
            height: 50px;
            background-color: black;
            color:aliceblue;
            line-height: 50px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div>
        <span class="hour"></span>
        <span class="minute"></span>
        <span class="second"></span>
    </div>
    <script>
        //1.获取元素
        var hour = document.querySelector('.hour');
        var minute = document.querySelector('.minute');
        var second = document.querySelector('.second');
        var inputTime = +new Date('2023-5-18 21:30:00');
        countDown();//先调用一次这个函数，防止第一次刷新页面有空白。
        // 2.开启定时器
        setInterval(countDown, 1000);

        function countDown() {
            var nowTime = +new Date();  
            var times = (inputTime - nowTime) / 1000;
            var h = parseInt(times / 60 / 60 % 24);
             h = h < 10 ? '0' + h : h;
             hour.innerHTML = h;
             var m = parseInt(times / 60 % 60);
             m = m < 10 ? '0' + m : m;
             minute.innerHTML = m;
             var s =  parseInt(times % 60);
             s = s < 10 ? '0' + s : s; 
             second.innerHTML = s;
        }
    </script>
</body>

(5)停止setInterval（）定时器

 <button class="begin">开启计时器</button>
    <button class="stop">停止计时器</button>
    <script>
        var begin = document.querySelector('.begin');
        var stop = document.querySelector('.stop');
        var timer = null;  //全局变量  null是一个空对象
        begin.addEventListener('click', function() {
            timer = setInterval(function() {
                console.log('ni');
            }, 1000);
        })
        stop.addEventListener('click', function() {
            clearInterval(timer);   
        })
    </script>

热身就犯困

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
定时器及倒计时效果

大多和setTimeout()相同，但这个方法重复调用一个函数，每隔这个时间，就去调用一次回调函数。setTimeout()也称回调函数callback。这个函数需要等待事件，时间到了才去调用这个函数。普通函数是按照代码顺序直接调用。
复制链接

扫一扫