复杂倒计时的实现

需求：点击开始按钮 清除上一次遗留定时器 开启定时器 计算 当前时间 到输入框中时间的倒计时

                1.1 点击完成后 清除上一次遗留的定时器

                1.2 如果只输入 不点击开始 不能计算新的倒计时

css: 

  <style>
        .wrap {
            width: 400px;
            height: 400px;
            background-color: #eaeaea;
            margin: 0 auto;
            border: 1px solid #eaeaea;
        }

        .wrap h1 {
            color: blue;
            text-align: center;
            margin: 30px;
        }

        .wrap input {
            width: 88px;
        }

        .wrap button {
            display: block;
            width: 100px;
            height: 100px;
            background-color: #000;
            color: orange;
            text-align: center;
            border-radius: 50%;
            font-size: 30px;
            line-height: 100px;
            margin: 30px auto;
            outline: none;
            border: none;
        }

        .wrap p:nth-last-child(2) {
            text-align: center;
            font-size: 20px;
        }
        .wrap p:nth-last-child(2) span{
            color: blue;
        }


        .wrap p:last-child {
            text-align: center;
            font-size: 20px;
            color: red;
        }

        .wrap p:last-child span {
            color: blue;
        }

    </style>

html:

    <div class="wrap">
        <h1>倒计时</h1>
        请输入：<input type="text">年<input type="text">月<input type="text">日
        <button>开始</button>
        <p>现在距离-<span>0000</span>-还剩：</p>
        <p><span>00</span>天<span>00</span>时<span>00</span>分<span>00</span>秒</p>
    </div>

js: 

 

         // 1. 获取元素
        var inps = document.getElementsByTagName('input');
        var btn = document.getElementsByTagName('button')[0];
        var ps = document.getElementsByTagName('p');
        var spans = document.getElementsByTagName('span');
        console.log(inps, btn, ps, spans);
        // 4.唯一标识
        var t = null;

        // 2. 点击开始按钮
        btn.onclick = function () {
            // 3.清除上一次遗留的定时器
            clearInterval(t);
            // 5.2.1获取输入框的值
            var year = inps[0].value;
            var month = inps[1].value;
            var riqi = inps[2].value;

            // 解决1s延迟
            auto();
           
            // 5.开启定时器
            t = setInterval(auto, 1000);
            function auto() {
                // 5.1创建当前时间
                var cur = new Date();
                // 5.2创建未来时间
                console.log(year,month,riqi);
                var fur = new Date('' + year + ',' + month + ',' + riqi + ',0:0:0');
                console.log(cur,fur);
                // 计算差
                var cha = fur - cur;

                // 秒
                var ss = parseInt(cha / 1000);

                // 分
                var mm = parseInt(cha / 1000 / 60 % 60);

                // 时
                var hh = parseInt(cha / 1000 / 60 / 60 % 24);

                // 天
                var dd = parseInt(cha / 1000 / 60 / 60 /24)
                console.log(ss,mm,hh,dd);

                // 赋值到页面
                spans[0].innerHTML = year +'年'+month+'月'+riqi+'日'
                spans[1].innerHTML = dd;
                spans[2].innerHTML = hh;
                spans[3].innerHTML = mm;
                spans[4].innerHTML = ss;
            }


        }

效果：

 

 

 

标签：60,复杂,实现,wrap,倒计时,color,spans,var,inps
来源： https://blog.csdn.net/qq_48294048/article/details/120571463