使用html+css+js實現倒計時，開啓你痛苦的倒計時吧

時間 2019-11-21

標籤使用 html+css+js html css 實現倒計時開啓痛苦欄目 HTML 简体版

原文原文鏈接

使用html+css+js實現倒計時，開啓你痛苦的倒計時吧css

效果圖：html

這是我痛苦的倒計時，嗚嗚嗚git

好啦，再痛苦仍是要分享代碼，代碼以下，複製便可使用：web

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>倒計時</title>
        <style>
            #time {
                width: 350px;
                height: 200px;
                margin: 100px auto;
            }
            
            #time input {
                margin: 20px auto;
                text-align: center;
                border-radius: 10px;
            }
            
            input::-webkit-outer-spin-button,
            input::-webkit-inner-spin-button {
                -webkit-appearance: none;
            }
            
            button {
                margin: 0 0 0 35px;
                border-radius: 10px;
            }
            
            #start {
                font-size: 1.55em;
            }
        </style>
        <script>
            function $(el) {
                if(typeof(el) == 'string') {
                    return(document.getElementById(el));
                }
                return(el);
            }

            function fillZero(num, digit) {
                var str = '' + num;
                if(str.length < digit) {
                    str = '0' + str;
                }
                return str;
            }
            window.onload = function() {
                var oDiv1 = $('time');
                var aInput = oDiv1.getElementsByTagName('input');
                var oYear = aInput[0]; //年
                var oMonth = aInput[1]; //月
                var oDay = aInput[2] //日
                var oDiv2 = $('start');
                var aSpan = oDiv2.getElementsByTagName('span');
                var sTxtDay = aSpan[0]; //天
                var sTxtHour = aSpan[1] //小時
                var sTxtMin = aSpan[2] //分
                var sTxtSec = aSpan[3] //秒
                var oTxtTarget = document.getElementsByTagName('b')[0];
                var timer = null;
                $('btn1').onclick = function() {
                    timer = setInterval(updateTime, 1000);
                    updateTime();
                }
                $('btn2').onclick = function() {
                    clearInterval(timer);
                }

                function updateTime() {
                    
                    var sYear = Math.abs(oYear.value);
                    var sMonth = Math.abs(oMonth.value);
                    var sDay = Math.abs(oDay.value);
                    if(sMonth > 12 || sDay > 31){
                        clearInterval(timer);
                        alert('你又調皮了');
                        return;
                    }
                    oTxtTarget.innerHTML = sYear + ' 年 ' + sMonth + ' 月 ' + sDay + ' 日 ';
                    var oEndDate = new Date(sYear, (sMonth - 1), sDay);
                    var oNowDate = new Date();
                    var iRemain = 0;
                    iRemain = parseInt((oEndDate.getTime() - oNowDate.getTime()) / 1000);
                    if(iRemain <= 0) { //判斷開始時間是否小於或等於今天
                        clearInterval(timer);
                        iRemain = 0;
                        alert('請輸入大於今天的時間');
                    }
                    var iDay = parseInt(iRemain / 86400); //剩餘天數

                    iRemain %= 86400;
                    var iHour = parseInt(iRemain / 3600); //剩餘小時

                    iRemain %= 3600;
                    var iMin = parseInt(iRemain / 60); //剩餘分鐘

                    iRemain %= 60;
                    var iSec = iRemain; //剩餘秒

                    sTxtDay.innerHTML = fillZero(iDay, 2);
                    sTxtHour.innerHTML = fillZero(iHour, 2);
                    sTxtMin.innerHTML = fillZero(iMin, 2);
                    sTxtSec.innerHTML = fillZero(iSec, 2);
                }
                

            }
        </script>
    </head>

    <body>
        <div id="time">
            年: <input type="number" min="2017" max="2017" value="2017" /> 
            月: <input type="number" min="1" max="12" value="1" /> 
            日: <input type="number" min="1" max="31" value="27" />
            <p><button id="btn1">開始倒計時</button><button id="btn2">中止倒計時</button></p>
            <p>如今距離:<b>2017 年 1 月 27 日</b> 還剩 </p>
            <div id="start">
                <span>00</span>天
                <span>00</span>小時
                <span>00</span>分
                <span>00</span>秒
            </div>
        </div>
    </body>

</html>