倒計(jì)時(shí)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒計(jì)時(shí)</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            background: #f7f7f7;
        }
        h1{
            text-align: center;
            line-height:40px;
            margin-top: 20px;
        }
        #box{
            width: 600px;
            height: 300px;
            box-shadow: 0 0 5px #aaa;
            margin: 10px auto;
            position: relative;
        }
        #box p{
            position: absolute;
            top: 10px;
            left: 10px;
            color: #DDDDDD;
            font-size: 25px;
        }
        #box p span{
            color: greenyellow;
        }
        #box b{
            display: block;
            font-size: 55px;
            line-height: 320px;
            text-align: center;
        }
        #objective{
            width: 587px;
            height: 24px;
            margin: 0 auto;
            line-height: 24px;
        }
        input{
            width: 50px;
            height: 20px;
            line-height: 20px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>倒計(jì)時(shí)</h1>
    <div id="box">
        <p>距離<span id="spanYear"></span> 年<span id="spanMonth"></span> 月<span id="spanDay"></span> 日<span id="spanHour"></span> 時(shí)<span id="spanMinute"></span> 分<span id="spanSecond"></span> 秒 還有:</p>
        <b id="main"></b>
    </div>
    <div id="objective">
        <input type="number" id="year"/> 年
        <input type="number" id="month"/> 月
        <input type="number" id="day"/> 日
        <input type="number" id="hour"/> 時(shí)
        <input type="number" id="minute"/> 分
        <input type="number" id="second"/> 秒
        <button id="btn">生成倒計(jì)時(shí)</button>
    </div>
    <script>
        function $(id) {
            return document.getElementById(id);
        };
        var timer = null;
        $("btn").onclick = function () {
            timer = setInterval(run,1000);
        };
        function run(){
            var valYear = $("year").value;
            var valMonth = $("month").value - 1;
            var valDay = $("day").value;
            var valHour = $("hour").value;
            var valMinute = $("minute").value;
            var valSecond = $("second").value;
            $("spanYear").innerHTML = ' ' + valYear;
            $("spanMonth").innerHTML = ' ' + valMonth + 1;
            $("spanDay").innerHTML = ' ' + valDay;
            $("spanHour").innerHTML = ' ' + valHour;
            $("spanMinute").innerHTML = ' ' + valMinute;
            $("spanSecond").innerHTML = ' ' + valSecond;
            //獲取現(xiàn)在的系統(tǒng)時(shí)間
            var getDate = new Date();
            //設(shè)置結(jié)束的系統(tǒng)時(shí)間
            var setDate = new Date( valYear,valMonth,valDay,valHour,valMinute,valSecond );
            //結(jié)束時(shí)間距現(xiàn)在的毫秒數(shù)
            var disparity = setDate - getDate;
            if ( disparity < 0 ){
                clearInterval(timer);
                $("main").innerHTML = "非常抱歉，您輸入的時(shí)間已經(jīng)過去，無法進(jìn)行倒計(jì)時(shí)";
                $("main").style.fontSize = 25 + 'px';
                return;
            };
            //計(jì)算剩余天數(shù)
            var surplusDay = parseInt( disparity / 1000 / 60 / 60 / 24 );
            //計(jì)算剩余小時(shí)數(shù)
            var surplusHour = parseInt( disparity / 1000 / 60 / 60 % 24 );
            //計(jì)算剩余分鐘數(shù)
            var surplusMinute = parseInt( disparity / 1000 / 60 % 60 );
            //計(jì)算剩余秒數(shù)
            var surplusSecond = parseInt( disparity / 1000 % 60 );
            //如果時(shí)間是個(gè)位數(shù)，則在前面拼接一個(gè) 0
            function Zero( n ){
                if( n < 10 && n >= 0 ){
                    n = '0' + n;
                };
                return n;
            };
           $("main").innerHTML = surplusDay + '天' + Zero(surplusHour) + '小時(shí)' + Zero(surplusMinute) + '分' + Zero(surplusSecond) + '秒';
    };
</script>
</body>
</html>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容