首頁 > web前端 > js教程 > 分享最簡單的JavaScript倒數程式碼(附完整程式碼)

分享最簡單的JavaScript倒數程式碼(附完整程式碼)

yulia
發布: 2018-10-15 10:30:54
原創
22920 人瀏覽過

工作中常常需要在頁面中設定倒數計時,那你知道JS倒數計時程式碼怎麼寫嗎?這篇文章就給大家分享一個最簡單的JS倒數代碼,以及詳細的倒數JS代碼的思路,,有一定的參考價值,有興趣的朋友可以看看。

範例:設定一個截止日期,顯示剩餘時間。例如雙十一馬上來了,商家搞活動,可以用JS倒數計時顯示距離活動結束還有多久。具體代碼如下:

HTML部分:

<body onload = "countTime()">
  <div>
         <span id="day"></span>
         <span id="hour"></span>
         <span id="minute"></span>
         <span id="second"></span>
    </div>
 </body>
登入後複製

給四個 標籤,用於顯示剩餘的天數,小時,分鐘和秒

# JavaScript部分:

<script type="text/javascript">
  function countTime() {
            //获取当前时间
            var date = new Date();
            var now = date.getTime();
            //设置截止时间
            var endDate = new Date("2018-10-31 0:0:0");
            var end = endDate.getTime();
            //获取截止时间和当前时间的时间差
            var leftTime = end-now;
            //定义变量 d,h,m,s分别保存天数,小时,分钟,秒
            var d,h,m,s;
            //判断剩余天数,时,分,秒
            if (leftTime>=0) {
                d = Math.floor(leftTime/1000/60/60/24);
                h = Math.floor(leftTime/1000/60/60%24);
                m = Math.floor(leftTime/1000/60%60);
                s = Math.floor(leftTime/1000%60);                   
            }
            //将时间赋值到div中
            document.getElementById("day").innerHTML = d+"天";
            document.getElementById("hour").innerHTML = h+"时";
            document.getElementById("minute").innerHTML = m+"分";
            document.getElementById("second").innerHTML = s+"秒";
            //递归每秒调用countTime方法,显示动态时间效果
            setTimeout(countTime,1000);
 
        }
 </script>
登入後複製

 倒數計時JS程式碼的想法:

1、用date = new Date() 取得目前時間

2、設定截止時間endDate = new Date( "2018-10-31 0:0:0")

3、取得時間差  leftTime = end-now

4、定義變數 d,h,m,s,以if函數判斷剩餘的天數與時分秒

5、用innerHTML將時間賦值到div中

6、遞迴每秒呼叫countTime函數的方法,顯示動態時間效果

效果如圖:

分享最簡單的JavaScript倒數程式碼(附完整程式碼)

以上和大家分享了一個簡單的JS倒數程式碼,詳細講解了JS倒數程式碼的思路,工作中可以直接拿去使用,比較簡單,初學者可以自己動手嘗試,看看能不能達到倒數計時的效果,希望這篇文章對你有幫助!

相關影片教學推薦:JavaScript影片教學

以上是分享最簡單的JavaScript倒數程式碼(附完整程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板