JavaScript 定时器

最新推荐文章于 2024-07-03 09:38:36 发布

御弟謌謌

最新推荐文章于 2024-07-03 09:38:36 发布

阅读量280

点赞数

分类专栏：前端文章标签： js jquery

本文链接：https://blog.csdn.net/abraham_ly/article/details/110110289

版权

前端专栏收录该内容

52 篇文章 4 订阅

订阅专栏

JavaScript 定时器

1、介绍

计时器有时候可以帮助我们做很多事情，比如倒计时、制作时间闹钟……等等。在JavaScrpt中，存在两种计时器，一种是一次性的，时间一到就执行；另一种是周期性的，根据设定的时间周期不断进行调用绑定的函数。

2、定时器分类

2.1创建计时器

2.1.1 setInterval 定时器

**说明：**按照指定的周期(以毫秒计)来调用函数或表达式。该方法会不停的调用绑定的函数，直到停止计时器或者窗口被关闭。

语法：

window.setInterval(code,millisec,lang);

2.1.2 setTimeout 定时器

**说明：**在指定的毫秒数之后调用绑定的函数或表达式，我们把这个函数也叫定时炸弹。

语法：

window.setTimeout(code,millisec,lang);

2.3 参数说明

参数	描述
code	必需。要调用的函数或要执行的代码串。
millisec	必需。周期性执行或调用code之间的时间间隔，以毫秒计。
lang	可选。JScript \| VBScript \| JavaScript

注意：

参数code为绑定函数，回调函数为callback。这个函数可以直接写在方法参数所在的位置，还可以可以采用字符串"函数名()"，以及直接写函数名的方式调用，但是不推荐使用字符串的方式。
millisec延迟的毫秒数可以省略，默认为0，如果写则必须是毫秒
如果定时器比较多的话，可以给每个定时器添加一个标识符，也就是用一个变量接收。

2.4 停止定时器

2.4.1 setInterver 定时器

window.clearInterval(定时器标识符);

2.4.2 setTimeout 定时器

window.clearTimeout(计时器标识符);

3、经典案例

3.1 手机号验证码发送倒计时

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机号验证倒计时</title>
    <style>
        div {
            width: 220px;
            height: 30px;
            line-height: 30px;
            margin: 150px auto;
        }
        
        #btn {
            width: 45px;
            height: 20px;
        }
        
        #tBox {
            width: 150px;
            height: 20px;
        }
    </style>
</head>

<body>
    <div>
        <input type="text" placeholder="+86 手机号" id="tBox">
        <input type="button" id="btn" value="获取">
    </div>
    <script>
        window.onload = function() {
            // 获取元素
            var tBox = document.querySelector("#tBox");
            var btn = document.querySelector("#btn");
            // 给按钮添加点击事件
            btn.addEventListener("click", function(e) {
                // 设置总共的秒数
                var second = 60;
                // 如果输入框中的值不为空
                if (tBox.value != "") {
                    // 添加计时器
                    var timer = window.setInterval(function() {
                        // 将秒数和单位赋值给按钮框
                        btn.value = second + "s";
                        // 修改总秒数
                        second -= 1;
                        // 当秒数为-1时
                        if (second == -1) {
                            // 修改按钮的值
                            btn.value = "获取";
                            // 并暂停计时器
                            window.clearInterval(timer);
                        }
                    }, 1000);
                }
            })
        }
    </script>
</body>

</html>

3.2 当前年月日以及时间

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS实现报时器</title>
    <style>
        .box {
            overflow: hidden;
            width: 619px;
            height: 400px;
            background-color: #49B5AA;
            margin: 80px auto;
        }
        
        .content {
            overflow: hidden;
            width: 555px;
            height: 318px;
            background-color: #ffffff;
            margin: 40px auto;
            border-radius: 20px;
        }
        
        h4 {
            width: 272px;
            height: 26px;
            margin: 0 auto;
            line-height: 26px;
            text-align: center;
            margin-top: 100px;
            font-size: 22px;
        }
        
        ul {
            width: 417px;
            height: 20px;
            margin: 20px 50px 98px 50px;
            color: #3CAFA4;
        }
        
        ul>li {
            list-style: none;
            float: left;
            font-size: 60px;
            margin: 0 10px;
        }
        
        #hour,
        #minute,
        #second {
            width: 77px;
            height: 77px;
            line-height: 77px;
        }
        
        ol {
            width: 417px;
            height: 20px;
            position: relative;
            left: 170px;
            color: #3CAFA4;
        }
        
        ol>li {
            list-style: none;
            float: left;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="content">
            <h4>钟表计时器(原创)</h4>
            <ol>
                <li id="year"></li>
                <li>年</li>
                <li id="month"></li>
                <li>月</li>
                <li id="day"></li>
                <li>日</li>
            </ol>
            <ul>
                <li id="hour"></li>
                <li>:</li>
                <li id="minute"></li>
                <li>:</li>
                <li id="second"></li>
            </ul>
        </div>
    </div>
    <script>
        window.onload = function() {
            // 获取时间元素
            var hour = document.querySelector("ul>#hour");
            var minute = document.querySelector("ul>#minute");
            var second = document.querySelector("ul>#second");
            // 获取日期元素
            var year = document.querySelector("ol>#year");
            var month = document.querySelector("ol>#month");
            var day = document.querySelector("ol>#day");

            // 设置日期
            function setDate() {
                // 实例化日期对象
                var date = new Date();
                year.innerText = date.getFullYear();
                date.getMonth() < 10 ? month.innerText = "0" + date.getMonth() : month.innerText = date.getMonth();
                date.getDate() < 10 ? day.innerText = "0" + date.getDate() : day.innerText = date.getDate();

            }
            // 设置时间
            function setTimer() {
                // 实例化日期对象
                var date = new Date();
                date.getHours() < 10 ? hour.innerText = "0" + date.getHours() : hour.innerText = date.getHours();
                date.getMinutes() < 10 ? minute.innerText = "0" + date.getMinutes() : minute.innerText = date.getMinutes();
                date.getSeconds() < 10 ? second.innerText = "0" + date.getSeconds() : second.innerText = date.getSeconds();
            }
            // 在计时器开启之前前将其函数加载并执行
            setDate();
            setTimer();
            // 创建并开启计时器
            window.setInterval(setDate, 1000);
            window.setInterval(setTimer, 1000);


        }
    </script>
</body>

</html>

3.3 元旦倒计时

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元旦倒计时</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            width: 200px;
            height: 250px;
            background-color: red;
            margin: 100px auto;
            overflow: hidden;
        }
        
        h4 {
            width: 100px;
            height: 30px;
            line-height: 30px;
            margin: 50px auto;
        }
        
        .day {
            width: 50px;
            height: 30px;
            font-size: 20px;
            margin: 0 auto;
            color: gold;
        }
        
        #time {
            width: 110px;
            height: 30px;
            margin: 10px auto;
        }
        
        ul>li {
            width: 30px;
            height: 30px;
            list-style: none;
            float: left;
            margin-left: 0px;
            text-align: center;
            line-height: 30px;
            color: gold;
        }
        
        .fig {
            width: 10px;
            margin-left: 0px;
        }
    </style>
</head>

<body>
    <div class="box">
        <h4>距离元旦还有</h4>
        <p class="day"></p>
        <ul id="time">
            <li class="hour"></li>
            <li class="fig">:</li>
            <li class="minute"></li>
            <li class="fig">:</li>
            <li class="second"></li>
        </ul>
    </div>
    <script>
        window.onload = function() {
            // 获取元素
            var day = document.querySelector(".day");
            var hour = document.querySelector(".hour");
            var minute = document.querySelector(".minute");
            var second = document.querySelector(".second");
            // 设置时间
            function setTimer() {
                // 先通过时间对象获取元旦的毫秒数
                var newYear = +new Date("2021-1-1 00:00:00");
                // 再获取当前的时间对象的毫秒数
                var nowtime = +new Date();
                // 当前时间距离元旦的秒数
                var distance = (newYear - nowtime) / 1000;
                // 通过距离的秒数获取天数
                var dayTime = parseInt(distance / 60 / 60 / 24);
                dayTime < 10 ? day.innerText = "0" + dayTime + "天" : day.innerText = dayTime + "天";
                // 获取距离的秒数的小时数
                var hourTime = parseInt(distance / 60 / 60 % 24);
                hourTime < 10 ? hour.innerText = "0" + hourTime : hour.innerText = hourTime;
                // 获取距离的秒数的分钟数
                var minuteTime = parseInt(distance / 60 % 60);
                minuteTime < 10 ? minute.innerText = "0" + minuteTime : minute.innerText = minuteTime;
                // 获取距离的秒数的秒数
                var secondTime = parseInt(distance % 60);
                secondTime < 10 ? second.innerText = "0" + secondTime : second.innerText = secondTime;
            }
            setTimer();
            window.setInterval(setTimer, 1000);
        }
    </script>
</body>

</html>