ICode9
精准搜索请尝试： 精确搜索
首页
编程语言>
数据库
系统相关
互联网
其他分享
Python
Java
JavaScript
android
PHP
首页 > 编程语言> 文章详细

JavaScript 定时器

2020-11-25 09:31:59  阅读：210  来源： 互联网

标签：定时器 width JavaScript height date innerText var


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>

标签：定时器,width,JavaScript,height,date,innerText,var
来源： https://blog.csdn.net/abraham_ly/article/details/110110289

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

关于我们 | 联系我们 | 留言反馈

专注分享技术，共同学习，共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有