javaScript计时器

挽风惹

已于 2024-01-11 20:34:40 修改

阅读量997

点赞数 12

文章标签： javascript 开发语言

于 2024-01-11 20:34:18 首次发布

本文链接：https://blog.csdn.net/weixin_52449515/article/details/135537587

版权

一、计时器

1、什么是计时器？

Window中为我们提供了两种计时器,：

定时器setTimeout()：定时器setTimeout()为一次性计时器,即在规定时间后执行,且只执行一次;

延迟计时器setInterval()：而延迟计时器setInterval()可以实现在指定时间内重复执行

2、计时器的语法

(1)定时器

创建定时器

   var time = setInterval( function() {

        },ms);

这里我们使用setInterval()方法之后返回一个time,time是该计时器的唯一标识.
参数ms即为在ms毫秒之后执行此定时器中的方法.

删除定时器

cleanIntravel(time);

这里我们使用cleanInterval()方法之后返回一个time,time是该计时器的唯一标识.

(2)延时器

创建延时器

 var time = setTimeout( function() {

        },ms);

这里我们使用setTimeout()方法之后返回一个time,time是该计时器的唯一标识.
参数ms即为在ms毫秒之后执行此定时器中的方法.

删除延时定时器

cleanTimeout（）；

这里我们使用cleanTimeout()方法之后返回一个time,time是该计时器的唯一标识.

二、计时器使用案例

1、正计时：通过拼接和queryseletor()方法来实现正计时实现，

代码展示

 <head>
    <style>
        * {
            margin-top: auto;
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            font-size: 40px;
            text-align: center;
        }

        .time {
            height: 30px;
            padding: 200px;
        }
        </style>

</head>

    <body>
        <div id=""></div>
        <script>
            function showTime() {
            let date = new Date()
            let year = date.getFullYear() //年份
            let month = date.getMonth() + 1 //0~11
            let day = date.getDate() //1~31
            let week = date.getDay() //0~6 0星期日
            //把数字转换为汉字
            let arr = ['日', '一', '二', '三', '四', '五', '六']
            let Week = arr[week]
            let hour = date.getHours() //0~23
            let minute = date.getMinutes() //0~59
            let seconds = date.getSeconds() //0~59
            //把一位数变为两位数
            month = month < 10 ? '0' + month : month;
            day = day < 10 ? '0' + day : day
                let time1 = `${year}年${month}月${day}日 星期${week}  ${hour}时 ${minute} 分${seconds}秒`
                document.querySelector('*').innerHTML = time1;
        }
        showTime()
            
        </script>
    </body>

结果展示

2、倒计时：我们设定一个终止时间，然后用函数的形式，通过’盒子‘来实现倒计时

代码展示

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: auto;
            text-align: center;
            padding: auto;
            margin-top: 50px;
        }
    </style>
</head>

<body>
    <div class="*">
        <span id="t"></span>
        <span id="h"></span>
        <span id="m"></span>
        <span id="s"></span>
    </div>
    <script>
        // 7.做一个倒计时，距“2024-1-15 12:00:00”还有几天几时几分几秒，让时间走起来（5分）
        function Gettime() {
            var Enddate = new Date('2024/1/15 /12:00:00')
            var Nowdate = new Date()
            var sj = Enddate - Nowdate;
            var t = Math.floor(sj / 1000 / 60 / 60 / 24);
            var h = Math.floor(sj / 1000 / 60 / 60 % 24)
            var m = Math.floor(sj / 1000 / 60 % 60)
            var s = Math.floor(sj / 1000 % 60)
            document.getElementById('t').innerHTML = t + '天'
            document.getElementById('h').innerHTML = h + '小时'
            document.getElementById('m').innerHTML = m + '分钟'
            document.getElementById('s').innerHTML = s + '秒'
        }
        setInterval(Gettime, 0)
    </script>
</body>

结果展示

挽风惹

关注

12
点赞
踩
18

收藏

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

定时器setTimeout()：定时器setTimeout()为一次性计时器,即在规定时间后执行,且只执行一次;延迟计时器setInterval()：而延迟计时器setInterval()可以实现在指定时间内重复执行。这里我们使用setInterval()方法之后返回一个time,time是该计时器的唯一标识.这里我们使用setTimeout()方法之后返回一个time,time是该计时器的唯一标识.1、正计时：通过拼接和queryseletor()方法来实现正计时实现，
复制链接

扫一扫