首页 / JAVASCRIPT / JavaScript 定时器

JavaScript 定时器

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了JavaScript 定时器，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含6827字，纯文字阅读大概需要10分钟。

内容图文

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>

内容总结

以上是互联网集市为您收集整理的JavaScript 定时器全部内容，希望文章能够帮你解决JavaScript 定时器所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/620654.html

来源：【匿名】