首頁>Club>

js如何實現動態倒計時效果？

4
回覆列表
  • 1 # 娛樂探索隊

    話不多說看程式碼，用js實現一個簡單的倒計時功能：

    <!doctype html>

    <html>

    <head>

    <meta charset="utf-8">

    <title>倒計時js</title>

    <style>

    *{ margin:0; padding:0; list-style:none;}

    body{ font-size:18px; text-align:center;}

    .time{ height:30px; padding:200px;}

    </style>

    </head>

    <body>

    <div>

    <span>00天</span>

    <span>00時</span>

    <span>00分</span>

    <span>00秒</span>

    </div>

    <script>

    function GetRTime(){

    var EndTime= new Date("2014/09/20 00:00:00");

    var NowTime = new Date();

    var t =EndTime.getTime() - NowTime.getTime();

    var d=0;

    var h=0;

    var m=0;

    var s=0;

    if(t>=0){

    d=Math.floor(t/1000/60/60/24);

    h=Math.floor(t/1000/60/60%24);

    m=Math.floor(t/1000/60%60);

    s=Math.floor(t/1000%60);

    }

    document.getElementById("t_d").innerHTML = d + "天";

    document.getElementById("t_h").innerHTML = h + "時";

    document.getElementById("t_m").innerHTML = m + "分";

    document.getElementById("t_s").innerHTML = s + "秒";

    }

    setInterval(GetRTime,0);

    </script>

    </body>

    </html>

  • ∧ 中秋節和大豐收的關聯？
  • ∨ 三國裡誰最有人格魅力？