倒计时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>倒计时</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>倒计时</h1>
    <div id="box">
        <p>距离<span id="spanYear"></span> 年<span id="spanMonth"></span> 月<span id="spanDay"></span> 日<span id="spanHour"></span> 时<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"/> 时
        <input type="number" id="minute"/> 分
        <input type="number" id="second"/> 秒
        <button id="btn">生成倒计时</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;
            //获取现在的系统时间
            var getDate = new Date();
            //设置结束的系统时间
            var setDate = new Date( valYear,valMonth,valDay,valHour,valMinute,valSecond );
            //结束时间距现在的毫秒数
            var disparity = setDate - getDate;
            if ( disparity < 0 ){
                clearInterval(timer);
                $("main").innerHTML = "非常抱歉，您输入的时间已经过去，无法进行倒计时";
                $("main").style.fontSize = 25 + 'px';
                return;
            };
            //计算剩余天数
            var surplusDay = parseInt( disparity / 1000 / 60 / 60 / 24 );
            //计算剩余小时数
            var surplusHour = parseInt( disparity / 1000 / 60 / 60 % 24 );
            //计算剩余分钟数
            var surplusMinute = parseInt( disparity / 1000 / 60 % 60 );
            //计算剩余秒数
            var surplusSecond = parseInt( disparity / 1000 % 60 );
            //如果时间是个位数，则在前面拼接一个 0
            function Zero( n ){
                if( n < 10 && n >= 0 ){
                    n = '0' + n;
                };
                return n;
            };
           $("main").innerHTML = surplusDay + '天' + Zero(surplusHour) + '小时' + Zero(surplusMinute) + '分' + Zero(surplusSecond) + '秒';
    };
</script>
</body>
</html>
推荐阅读更多精彩内容
