setTimeout()、setInterval()

妍华之喜

已于 2022-04-27 16:46:20 修改

阅读量778

点赞数 2

文章标签： javascript js 前端

于 2021-01-01 09:13:29 首次发布

本文链接：https://blog.csdn.net/XVJINHUA954/article/details/112058284

版权

setTimeout()、setInterval()

setTimeout()定时炸弹

setTimeout()使用时指定一个时间段,只要时间到了直接执行绑定的函数

setTimeout()中传递两个参数

第一个参数:事件所执行的函数

第二个参数:时间间隔就是时间段(以毫秒为单位)

实例

window.setTimeout(function(){
            alert("hello");
        },3000)

停止定时器

停止定时器方法取消了先前通过调用setTimeout()建立的定时器，括号中的参数就是要停止的定时器的标识符

语法

window.clearTimeout(参数);

setInterval()闹钟定时器

setInterval()使用时指定一个时间段,然后每隔这个时间段都会调用一次绑定函数

setInterval()中传递两个参数

第一个参数:事件所执行的函数

第二个参数:时间间隔就是时间段(以毫秒为单位)

实例

var i=0;
window.setInterval(function(){
    console.log(i);
    i++;
},1000);

停止定时器

停止定时器方法取消了先前通过调用setInterval()建立的定时器，参数就是要停止的定时器的标识符

语法

window.clearInterval(参数)

注意:

绑定函数的时候,回调函数(callback)可以直接写在方法参数所在的位置,还可以采取字符串"函数名()",还可以直接写函数名,三种调用方式,但是不推荐使用字符串方式
延迟的毫秒数可以省略,默认为0,如果要写的话必须是毫秒
如果定时器比较多的话，可以给每个定时器一个标识符

原生JS实现元旦倒计时

今天我们使用我们学过的计时器来实现元旦倒计时.

废话少说,直接上源码!

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元旦倒计时</title>
    <!-- css样式 -->
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }

        div {
            width: 800px;
            height: 250px;
            border: 1px solid skyblue;
            margin: 50px auto;
        }

        p {
            font-size: 45px;
            color: tomato;
            text-align: center;
        }

        span {
            display: inline-block;
            height: 60px;
            font-size: 45px;
        }

        .day {
            margin-left: 150px;
        }
    </style>
</head>

<body>
    <!-- HTML结构 -->
    <div>
        <p>元旦倒计时</p>
        <p>距离元旦还有:</p>
        <span class="day">0</span>
        <span>天</span>
        <span class="hour">0</span>
        <span>小时</span>
        <span class="minute">0</span>
        <span>分钟</span>
        <span class="second">0</span>
        <span>秒</span>
    </div>
    <script>
        // js实现功能
        window.onload = function () {
            // 获取页面元素
            var day = document.querySelector(".day")
            var hour = document.querySelector(".hour")
            var minute = document.querySelector(".minute")
            var secondy = document.querySelector(".second")
            // 定义计时器
            window.setInterval(fun, 1000)
            // 计时器绑定事件
            function fun() {
                // 定义元旦时间的时间戳
                // 注意:这里是2021年的元旦,如果想要别的日期的话,可以自己设置
                var time = +new Date("2021,1,1")
                // 定义当前的时间的时间戳
                var tim = +new Date()
                // 用元旦时间的时间戳减去当前的时间的时间戳就是倒计时的毫秒数
                var num = time - tim
                // 分别计算出天,小时,分钟,秒等数据
                var d = parseInt(num / 1000 / 60 / 60 / 24);
                var h = parseInt(num / 100 / 60 / 60 % 24);
                var m = parseInt(num / 100 / 60 % 60);
                var s = parseInt(num % 60);
                // 分别赋值(每隔一秒获取赋值一次)
                day.innerText = d
                hour.innerText = h
                minute.innerText = m
                secondy.innerText = s

            }
        }
    </script>
</body>

</html>

鄙人小白一枚,见谅!有什么问题的话欢迎大家评论,本人会及时改正!

妍华之喜

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
setTimeout()、setInterval()

简述JS中两种定时器的用法setTimeout()定时炸弹setTimeout()使用时指定一个时间段,只要时间到了直接执行绑定的函数setTimeout()中传递两个参数第一个参数:事件所执行的函数第二个参数:时间间隔就是时间段(以毫秒为单位)实例window.setTimeout(function(){ alert("hello"); },3000)停止定时器停止定时器方法取消了先前通过调用setTimeout()建立的定时器，括号中的参数
复制链接

扫一扫