计时器，时钟，秒表，倒计时

在js中定时器有两种

1、setInterval()

​ 格式：var 变量名 = setInterval(“执行的语句”,每隔多久执行一次);

​ 【注意】可以写执行的代码，也可以直接传入函数。

​ 返回值：启动定时器时，系统分配的编号

2、setTimeout（）

​ 只在指定时间后执行一次。

​ 关闭：clearTimeout();

​ 【注意】 clearTimeout函数需要一个参数：定时器的编号。

关闭计时器

​ 关闭定时器的方式：

​ 1.关闭页面。

​ 2.clearInterval();

​ 【注意】 clearInterval函数需要一个参数：定时器的编号。

​

小时钟

function showTime(d) {
    // 获取年
    var year = d.getFullYear();
    // 获取月
    var month = d.getMonth()+1;
    // 获取日
    var date = d.getDate();
    // 小时数
    var hours = d.getHours();
    // 获取分钟数
    var m = d.getMinutes();
    // 获取秒数
    var seconds = d.getSeconds();
    // 获取星期几
    var day = d.getDay();
    var str = year + "年" + doubleNum(month) +"月"+doubleNum(date)+"日  星期"+num2Chinese(day)+" "+hours+":"+m+":"+seconds;
    return str;
}
// 数字转中文
function num2Chinese(num) {
    var arr = ["日","一","二","三","四","五","六"];
    return arr[num];
}
// 给小于10的前面补0
function doubleNum(n) {
    if(n<10){
        return "0"+n;
    }else{
        return n
    }
}

秒表

html代码

 <div class="box">
        <div id="showTime">
            <span>00</span>
            <span>:</span>
            <span>00</span>
            <span>:</span>
            <span>00</span>
        </div>
        <div class="bnt">
            <button id="resetBtn">复位</button>
            <button id="startBtn">开始</button>
        </div>
    </div>

css代码

  * {
            margin: 0;
            padding: 0;
        }
        
        .box {
            margin: 10px auto;
            width: 400px;
        }
        
        span {
            font-size: 60px;
        }
        
        button {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            font-size: 24px;
            margin: 0 48px;
            border: 0;
            outline: none;
            cursor: pointer;
        }
        
        #showTime {
            text-align: center;
            margin-bottom: 20px;
        }

JavaScript代码

 window.onload = function() {
            var min = 0;
            var s = 0;
            var ms = 0;
            var time1;
            var spans = document.getElementsByTagName('span');
            // 复位
            $('button')[0].onclick = function() {
                    min = 0;
                    s = 0;
                    ms = 0;
                    spans[0].innerHTML = '00';
                    spans[2].innerHTML = '00';
                    spans[4].innerHTML = '00';
                    $('button')[1].innerHTML = '开始';
                    clearInterval(time1);
                }
                //开始
            $('button')[1].onclick = function() {
                if ($('button')[1].innerHTML == '开始') {
                    $('button')[1].innerHTML = '停止';
                    clearInterval(time1);
                    time1 = setInterval(show, 10);
                } else {
                    $('button')[1].innerHTML = '开始';
                    clearInterval(time1);
                }
            }

            function show() {
                ms++;
                if (ms == 100) {
                    ms = 0;
                    s++;
                }
                if (s == 60) {
                    s = 0;
                    min++;
                }
                var msStr = ms;
                if (ms < 10) {
                    msStr = "0" + ms
                }
                var sStr = s;
                if (s < 10) {
                    sStr = "0" + s;
                }
                var minStr = min;
                if (min < 10) {
                    minStr = "0" + min;
                }
                spans[0].innerHTML = minStr;
                spans[2].innerHTML = sStr;
                spans[4].innerHTML = msStr;
            }

            function $(str) {
                return document.getElementsByTagName(str);
            }
        }

倒计时

html代码

 <div class="box">
        <p class="round">12:00 场</p>
        <img src="data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAA1CAYAAAAklDnhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJ
bWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdp
bj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6
eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1
MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJo
dHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlw
dGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAv
IiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RS
ZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpD
cmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChNYWNpbnRvc2gpIiB4bXBNTTpJbnN0YW5j
ZUlEPSJ4bXAuaWlkOjY4Q0ZFMkY5MTJFNzExRThCMkM4OEM1RTNBNjczQUVBIiB4bXBNTTpEb2N1
bWVudElEPSJ4bXAuZGlkOjY4Q0ZFMkZBMTJFNzExRThCMkM4OEM1RTNBNjczQUVBIj4gPHhtcE1N
OkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjhDRkUyRjcxMkU3MTFFOEIy
Qzg4QzVFM0E2NzNBRUEiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjhDRkUyRjgxMkU3MTFF
OEIyQzg4QzVFM0E2NzNBRUEiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94Onht
cG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz5oEyacAAACoklEQVR42sSYv0tbURTHX0LqD6T4g4pE
cHDoUOloBxVd/QFFEcQqWtrSKlKFmmAslopohzgIbv4FwUEE0clFujiIi+BSIbRQ0ooKRReRULHf
S48Qgu++c3/FAx+iyU3eJzf3nnPuC/1qavQ04zVY8szjCHRGNN9cBD6DSkOJKzAGzsOaH/AW1FuY
jRg4EH/oiJSCTxYk1sDK7T86Iu9BraHED/Au9wlVkYdg2lAiC/rBhYnIB/DIUOQj2M9/UkWkCsQN
JbbA8l0vqIhMgXIDiZ/gFbgxEakBEwYSf8Eg+OM3gCsyA8oMRETy25UN4IjUgVEDiW2wGDSIIzIL
ijUljsFLv3WhIvKYFphOXNO6OOUMDhKZA7qFcQF85Q6WXeQpeKEpcULlvY8xthp8iwR8I93qLLb7
KnOsSPWNfhd6Bro99yHqTi9IhyWzEXIsIXbSG7Djt1jbQHsBZkMkyZRs13wpgIRoiJKy7dsBWh1L
bN5Vt3JFQrQ2XMYeGKBk5yvSI7aRQ4k0eA4uZZlVPM47lDgTZxd6lKb4AcqkLuKSZiIdVGsiVFNc
xDV9yT1Orekjoe+MDw4pHqwmaJewit66Ql0QaX+DOTaZe4DitAFZxQaaEynKnJ6KCDeaQAtj3A7V
kBtXIpwT3iFV06zqquaKPKEtKIsM6Mo/StoWiQeMvSCJjO4+54hEwTCjuTk0STgckUm6QxTY3LgU
Kc+/jyFrblyKCIkKbnPjSkT8HDGV5saVyBAtVHZz40Ik7HNTRtrcuBARF2tQbW5ciCR0mhvbIs2E
cnNjWySh29zYFGnIK25KzY1Nkdziptzc2BKJUu7Qbm5sicQom2o3NzZEKqiu/DZpbmyIjIAHNBMZ
7x4iTALjhcgVQSIl3v87w5vePcY/AQYAFYR6skFSqBUAAAAASUVORK5CYII=" alt="小米闪购">
        <p class="desc">距离结束还有</p>
        <p class="countdown clearfix">
            <span>00</span>
            <i>:</i>
            <span>00</span>
            <i>:</i>
            <span>00</span>
        </p>
    </div>

css代码

  .box {
            width: 234px;
            height: 340px;
            box-sizing: border-box;
            margin: 0 auto;
            border-top: 1px solid #e53935;
            background-color: #f1eded;
            text-align: center;
        }
        
        .round {
            font-size: 21px;
            color: #ef3a3b;
            padding-top: 15px;
        }
        
        img {
            margin: 25px 0;
            border: none;
        }
        
        .desc {
            color: rgba(0, 0, 0, .54);
            font-size: 15px;
        }
        
        .countdown {
            width: 168px;
            margin: 28px auto 0;
        }
        
        .clearfix::after {
            content: "";
            clear: both;
            display: block;
        }
        
        .countdown span {
            width: 46px;
            height: 46px;
            background: #605751;
            color: #fff;
            font-size: 24px;
            line-height: 46px;
            float: left;
        }
        
        .countdown i {
            width: 15px;
            float: left;
            height: 46px;
            line-height: 46px;
            color: #605751;
            font-size: 28px;
            font-style: normal;
        }

JavaScript代码

方法1

window.onload = function() {
    var spans = document.getElementsByTagName('span');
    var desc = document.getElementsByClassName('desc')[0];
    var time;
    time = setInterval(countdown, 1000);

    function countdown() {
        var dates = (new Date(2021, 0, 8, 9, 48, 0) - new Date()) / 1000;
        var h = parseInt(dates / 3600);
        var m = parseInt(dates % 3600 / 60);
        var s = parseInt(dates % 60);
        if (dates < 0) {
            clearInterval(time);
            h = 0;
            m = 0;
            s = 0;
            desc.innerHTML = '本场已经结束';
        }
        spans[0].innerHTML = h < 10 ? '0' + h : h;
        spans[1].innerHTML = (m < 10) ? "0" + m : m;
        spans[2].innerHTML = (s < 10) ? "0" + s : s;

    }
}

方法2

 
window.onload = function() {
var date = new Date("2021-01-08 9:36:10");
        // var date = new Date(2021,0,8,12,00,00);
        var nowDate = new Date();
        // 差值：总的秒数
        var dateDiff = parseInt((date.getTime()-nowDate.getTime())/1000);
        // 小时数
        var hours = parseInt(dateDiff/3600);
        // 分钟数
        var min = parseInt(dateDiff/60)%60;
        //秒数
        var sec = dateDiff%60;

        var timer,spans,desc = null;

        
        window.onload = function() {
            spans = document.getElementsByTagName("span");
            desc = document.getElementsByClassName("desc")[0];
            timer = setInterval(showTime,1000);
        }

        function showTime() {
            sec--;
            if (sec < 0) {
                sec = 59;
                min--;
            }
            if (min<0) {
                min=59;
                hours--;
            }
            // 计时结束
            if (hours<0) {
                hours = 0;
                min=0;
                sec = 0;
                clearInterval(timer);
                desc.innerHTML = "该场次已结束";
            }
            spans[0].innerHTML = hours<10?"0"+hours:hours;
            spans[1].innerHTML = min<10?"0"+min:min;
            spans[2].innerHTML = sec<10?"0"+sec:sec;      
            
        }
}