倒计时效果

最新推荐文章于 2024-01-27 14:24:03 发布

DF_jie

最新推荐文章于 2024-01-27 14:24:03 发布

阅读量445

点赞数 1

文章标签： javascript html css

本文链接：https://blog.csdn.net/DF_jie/article/details/109957123

版权

本文介绍了如何使用JavaScript的setTimeout()和setInterval()创建倒计时效果。讲解了两种定时器的区别，提供了倒计时的实现原理，并指出可以通过添加样式来美化倒计时展示。

摘要由CSDN通过智能技术生成

上一篇我们写了怎么获得倒计时，现在来写一个倒计时的效果
写倒计时效果需要用到我们的定时器；
定时器分为两种：
一种是 setTimeout（）定时器，也叫爆炸定时器，顾名思义就是这个定时器只使用一次就结束了。
另一种就是 setInterval （）定时器，也称为闹钟定时器，每间隔一段时间就会执行这个定时器的效果。

setTimeout（）定时器

setTimeout （）
语法规范： window.setTimeout(调用函数, 延时时间);
1. 这个window在调用的时候可以省略
2. 这个延时时间单位是毫秒但是可以省略，如果省略默认的是0
3. 这个调用函数可以直接写函数还可以写函数名还有一个写法 ‘函数名()’
4. 页面中可能有很多的定时器，我们经常给定时器加标识符（名字)

   <script>
        // 回调函数是一个匿名函数
         setTimeout(function() {
   
             console.log('时间到了');

         }, 2000);//在2秒后打印出  时间到了


         // 回调函数是一个有名函数
        function callback() {
   
            console.log('爆炸了');
        }
		
        var timer1 = setTimeout(callback, 3000);//在3秒后打印出  爆炸了
        var timer2 = setTimeout(callback, 5000)