1. 程式人生 > >簡單倒計時實現,精確到到天,時,分,秒,具體可自行設定

簡單倒計時實現,精確到到天,時,分,秒,具體可自行設定

歡迎來到Altaba 的部落格

不廢話,直接上程式碼,程式碼雖然簡單,能給讀者帶來點絲毫的便利也是好的。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>倒計時實現</title>
    <style>
        .ddd{
            width: 700px;
            height: 100px;
            margin: 100px auto;
            text-align: center;
            font-size: 30px;
            color: red;
        }
    </style>
    <script>
        window.onload=function(){
            var box=document.getElementById("box");
            var endDate=new Date("2017/1/24 18:30:00");設定結束時間
            /*console.info(endDate);
             console.info(date);*/
            var endtime=endDate.getTime();  getTime() 方法可返回距 1970 年 1 月 1 日之間的毫秒數。

            window.setInterval(fun,1000); 此處是個計時器,已設定每一秒執行一次fun函式

            function fun(){
                var date=new Date();
                var nowtime=date.getTime();
                var allTime=parseInt((endtime-nowtime)/1000);此差值用來計算剩餘時間
                //console.info(allTime);
                var d=parseInt(allTime/3600/24);
                var h=parseInt(allTime/3600%24);
                var m=parseInt(allTime/60%60);
                var s=parseInt(allTime%60);

                d<10 ? d="0"+d : d;
                h<10 ? h="0"+h : h;
                m<10 ? m="0"+m : m;
                s<10 ? s="0"+s : s;

                box.innerHTML="現在開始倒計時:"+d+"天"+h+"時"+m+"分"+s+"秒";

            }
        }
    </script>
</head>
<body>
<h2 style="text-align: center; font-size: 35px">距離放假倒計時!</h2>
    <div id="box" class="ddd"></div>
</body>
</html>