设置倒计时

html：

    <div class="box">
        <div class="box1">
            <input type="date" id="shijian" value="">
            <button id="shezhi" type="button" onclick="dao()">设置</button>
        </div>
        <div class="sj" id="dao">00天00小时00分钟00秒</div>
    </div>

css：

    *{box-sizing: border-box;}
.box {width: 400px; height: 150px; margin:  0 auto; position: relative;background-color:lightgreen; border-radius: 20px;}
.sj {font-size: 30px;position:absolute; bottom: 20px; left: 40px;  color: lightyellow;}
#shijian{width: 150px; height: 30px; background-color: lightyellow;  border-radius:5px; border: 0px;}
.box1{position: absolute; top: 20px; left: 90px;}
#shezhi{width: 60px; height: 30px; background-color: lightyellow; border: 0px; border-radius: 5px;}

js：

        function dao() {
            setInterval(function () {
                var kaitime = new Date();
                var obj = document.getElementById("shijian").value;
                var jietime = new Date(obj);
                var julitime = jietime.getTime() - kaitime.getTime();
                var d = Math.floor(julitime / (1000 * 60 * 60 * 24));
                var h = Math.floor(julitime / (1000 * 60 * 60) % 24);
                var m = Math.floor(julitime / (1000 * 60) % 60);
                var s = Math.floor(julitime / 1000 % 60);
                var res = d + '天' + h + '小时' + m + '分钟' + s + '秒';
                document.getElementById("dao").innerHTML = res;
            }, 1000)
        }