javaScript系列---【Date--倒计时案例】

html代码:

  <div id="box">
        <h3>倒计时</h3>
        请输入：<input type="text" value="2022" />年 <input type="text" value="7" />月 <input type="text" value="26" />日
        <button>开始</button>
        <p class="p1">现在距离- <span>0000</span> -还剩：</p>
        <p class="p2"><span>00</span>天 <span>00</span>小时 <span>00</span>分 <span>00</span>秒</p>
    </div>

css代码:

 <style>
        #box {
            width: 500px;
            height: 500px;
            background: #eee;
            margin: 20px auto;
            text-align: center;
        }

        #box h3 {
            font-size: 32px;
            padding: 30px;
            color: white;
        }

        #box input {
            width: 100px;
        }

        button {
            width: 160px;
            height: 160px;
            background: #000;
            margin-top: 30px;
            border-radius: 80px;
            color: yellow;
            font-size: 40px;
        }

        .p1 span {
            font-size: 24px;
            color: yellow;
        }

        .p2 {
            font-size: 30px;
            color: white;
        }

        .p2 span {
            font-size: 40px;
            color: yellow;
        }
    </style>

 

js代码:

  <script>
        // 获取元素
        var box = document.getElementById("box"),
            oInputs = box.getElementsByTagName("input"),
            btn = box.getElementsByTagName("button")[0],
            oSpans = box.getElementsByTagName("span");

        var timer = null;

        // 获取元素
        btn.onclick = function () {
            //保存输入框的值
            var y = oInputs[0].value;
            var m = oInputs[1].value;
            var d = oInputs[2].value;

            // 给span赋值
            oSpans[0].innerHTML = y + "年" + zero(m) + "月" + zero(d) + "日";

            // 页面初始化
            downCount();

            // 防止用户多次点击先清除定时器
            window.clearInterval(timer);

            // 设置定时器
            timer = window.setInterval(downCount, 1000);


            // 倒计时
            function downCount() {
                // 当前时间
                var nowDate = new Date();

                // 目标时间
                var tarDate = new Date(y, m - 1, d);

                // 日期对象直接直接相减可以得到毫秒差
                var diffSeconds = parseInt((tarDate - nowDate) / 1000);
                console.log(diffSeconds);
                // 将秒值转为需要的时间
                var day = parseInt(diffSeconds / 86400);
                var hour = parseInt(diffSeconds % 86400 / 3600);
                var minutes = parseInt(diffSeconds % 3600 / 60);
                var seconds = diffSeconds % 60;

                // 赋值的操作
                oSpans[1].innerHTML = zero(day);
                oSpans[2].innerHTML = zero(hour);
                oSpans[3].innerHTML = zero(minutes);
                oSpans[4].innerHTML = zero(seconds);
            }
        }
        // 补零操作
        function zero(val) {
            return val < 10 ? "0" + val : val;
        }
    </script>

效果图: