从零到一学JS：写个定时器，可以自定义时间，目前最大值366天-1s

每日一kun：愿我能在你清晨雾般的眼神里，愿我常在你清澈安详的心湖底。

怎么说呢，代码整体流程等dom加载完再使用bom的load方法去加载所有的JS代码，好处就是可以把JS代码先在HTML前面，核心代码就是如何把用户输入的时间转化为标准时间进行倒计时，重点就是countTime方法的使用，和定义一个全局变量settimeout，方便在倒计时结束关闭定时器setinterval。

js代码
  window.addEventListener("load", function () {
            var d = document.querySelector(".day")
            var h = document.querySelector(".hour")
            var m = document.querySelector(".minute")
            var s = document.querySelector(".second")
            var btn = document.querySelector("button")

            var time = null
            var settimeout = null

            btn.addEventListener("click", function () {
                var dinputs = document.querySelectorAll("input")
                var dinput = dinputs[0].value
                var hinput = dinputs[1].value
                var minput = dinputs[2].value
                var script = dinputs[3].value

                countDown(dinput, hinput, minput, script)
                countTime()
                settimeout = setInterval(countTime, 1000)
            })


            function countDown(d, h, m, s) {
                time = +new Date() + 1000 * s + m * 60 * 1000 + h * 60 * 60 * 1000 + d * 24 * 60 * 60 * 1000

            }

            function countTime() {
                var nowtime = +new Date()
                var times = (time - nowtime) / 1000

                var day = parseInt(times / 60 / 60 / 24 % 365)
                day = day < 10 ? "0" + day : day
                d.innerHTML = day
                var hour = parseInt(times / 60 / 60 % 24)
                hour = hour < 10 ? "0" + hour : hour
                h.innerHTML = hour
                var minute = parseInt(times / 60 % 60)
                minute = minute < 10 ? "0" + minute : minute
                m.innerHTML = minute
                var second = parseInt(times % 60)
                second = second < 10 ? "0" + second : second
                s.innerHTML = second
                if (day == 0 && hour == 0 && minute == 0 && second == 0) {

                    clearInterval(settimeout)
                    alert("倒计时结束")

                }
            }


        })
html代码
<div class="day">
        1
    </div>

    <div class="hour">
        1
    </div>
    <div class="minute">
        1
    </div>
    <div class="second">
        1
    </div>

    <ol>
        <li> 请输入倒计时的天数
            <input>
        </li>
        <li>请输入倒计时的小时
            <input>
        </li>
        <li>请输入倒计时的分钟
            <input>
        </li>
        <li>请输入倒计时的秒数
            <input>
        </li>
        <li>
            <button>开始倒计时</button>
        </li>
    </ol>

css代码
        div {

            float: left;
            width: 50px;
            height: 50px;
            color: white;
            background-color: black;
            text-align: center;
            align-items: center;
            margin-left: 10px;
            line-height: 50px;
        }

        ol {
            margin-left: 220px;
            list-style-type: none;
        }

        button {
            margin-left: 240px;
        }

结果

思考：今天停止思考，期间出了个小bug导致分钟一直转换不正确，后来发现多乘了一个零，直接导致数据翻了10倍

//正确代码
time = +new Date() + 1000 * s + m * 60 * 1000 + h * 60 * 60 * 1000 + d * 24 * 60 * 60 * 1000
//错误代码
time = +new Date() + 1000 * s + m * 60 * 10000 + h * 60 * 60 * 1000 + d * 24 * 60 * 60 * 1000

一包烟 一杯咖啡 一个bug 找一天

累了 开溜