定时器

最新推荐文章于 2024-06-09 20:17:27 发布

qq_47407622

最新推荐文章于 2024-06-09 20:17:27 发布

阅读量209

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/qq_47407622/article/details/109301597

版权

定时器：

定时器1： **window.setTimeout(callback, time),又叫炸弹定时器。

作用：延迟执行一段程序，仅仅执行一次（定时炸弹），返回一个数字，表示是哪个定时器。

参数：
callback, 函数定义，函数体中存放定义器要执行的代码
time, 等待的时间，数字，表示的是毫秒

清除定时器：window.clearTimeout(定时器的标识);

代码：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    body{
        background-color: blue;
    }
</style>
<body>
    <script>
       var fn=function (){
        document.body.style.backgroundColor="white"
    }
    setTimeout(fn,1000)   
    </script>
</body>
</html>

定时器2：window.setInterval(callback, time)

callback, 函数定义，函数体中存放定义器要执行的代码。
time, 等待的时间，数字，表示的是毫秒

作用：延迟执行一段程序，重复执行（闹钟）。返回一个数字，表示是哪个定时器。

清除定时器：window.clearInterval(定时器的标识);

// 开启一个定时器
  var num = setInterval(function(){
    var date = new Date();
    console.log(date);
  },1000);



// 获取按钮
  var btn = document.querySelector('button');
  btn.onclick = function () {
    clearInterval(num);
  };

新年倒计时案例：

简单思想为：
1.获得未来时间戳
2，在定时器中，获得现在时间戳，未来时间戳与现在时间戳的差值为想要得到的倒数时间。
3.将最后的时间戳处理后进行赋值。

过程代码：
1.获得时间戳

        // 获得未来时间戳
        var futureTime = future.getTime()

2.设置定时器，获取当前时间戳

        var timer = setInterval(function () {
            // 定义当前时间
            var today = new Date();
            // 获得现在时间戳
            var nowTime = today.getTime()

新年倒计时案例具体代码：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    window.onload=function () {
        // 建立日期
        var future = new Date("2021-02-11")
        // 获得未来时间戳
        var futureTime = future.getTime()
        // 定时器  1000ms间隔
        var timer = setInterval(function () {
            // 定义当前时间
            var today = new Date();
            // 获得现在时间戳
            var nowTime = today.getTime()
            // 计算相差的时间戳
            var num = futureTime - nowTime;
            // 相差时间除1000%60获得秒，在取整----parseint数字取整
            var s = parseInt(num / 1000 % 60);
            // 获得分钟
            var min = parseInt(num / 1000 / 60 % 60);
            // 获得小时
            var h = parseInt(num / 1000 / 60 / 60 % 24);
            // 获得天
            var day = parseInt(num / 1000 / 60 / 60 / 24);

            // 获得span标签
            // 获得span标签
            var box = document.querySelector(".time")
            // 在span中填入内容---${day}表示数字
            box.innerHTML = `${day}天${h}小时${min}分${s}秒`
        }, 1000)
    }
</script>
新年倒计时：<span class="time"></span>
</body>
</html>

qq_47407622

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
定时器

定时器：定时器1： **window.setTimeout(callback, time),又叫炸弹定时器。作用：延迟执行一段程序，仅仅执行一次（定时炸弹），返回一个数字，表示是哪个定时器。参数：callback, 函数定义，函数体中存放定义器要执行的代码time, 等待的时间，数字，表示的是毫秒清除定时器：window.clearTimeout(定时器的标识);代码：<html lang="en"><head> <meta charset="UT
复制链接

扫一扫