简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

Date物件怎麼做倒數功能

php中世界最好的语言
發布： 2018-04-16 13:42:00
原創
2031 人瀏覽過

這次帶給大家Date物件怎麼做出倒數功能，Date物件做出倒數功能的注意事項有哪些，下面就是實戰案例，一起來看一下。 

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒计时动画</title>
  <style>
    p{
      text-align:center;
      height:100px;
      line-height:100px;
    }
  </style>
  <script>
    window.onload = function(){
      setInterval(FreeTime,1000);
    }
    function FreeTime(){
      var curTime = Date.now();
      var endTime = new Date("2017-10-26 16:00:00");
      var allFreeSeconds = (endTime-curTime)/1000;
      if(allFreeSeconds>0){
        var freeDay = Math.floor(allFreeSeconds/(24*60*60));
        var freeHour = Math.floor(allFreeSeconds/(60*60) % 24);
        var freeMinute = Math.floor(allFreeSeconds/60 % 60);
        var freeSecond = Math.floor(allFreeSeconds%60);
        document.getElementById("nowTime").innerHTML = "剩余"+freeDay+"天"+freeHour+"时"+freeMinute+"分"+freeSecond+"秒";
      }
      else{
        document.getElementById("nowTime").innerHTML = "已结束";
      }
    }
  </script>
</head>
<body>
<p>
  <span id="nowTime"></span>
</p>
</body>
</html>
登入後複製

我相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

SpringJDBC怎樣批次操作資料

#el-upload怎麼上傳Excel檔案

#

以上是Date物件怎麼做倒數功能的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
date 倒數計時
來源：php.cn
上一篇：vue中v-model動態使用詳解 下一篇：vue-cli+sass使用詳解
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
這個where子句可以最佳化嗎？ 有人可以幫我解決這個問題嗎？我對以下功能有疑問；我可以為此創建一個虛擬專欄嗎？ selectas1.col,as1.col2,as1.col3fromanalytics.adjus...
來自於 2024-04-01 16:12:46
0
1
295
SQL 查詢中第 1 行「OVER (ORDER BY r.Id)) AS Grown FROM results AS r ORDER BY r.Id LIMIT 0.25」附近有語法錯誤 我有一個SQL命令，它使用lag來列出表中的數據，並與先前的值進行計算，以計算增加的百分比。在我的本機上它可以工作，但在我的主機上它不斷給出此錯誤，我使用mysql。 CREATE...
來自於 2024-04-01 10:36:24
0
1
251
如何使用Intl.dateTimeFormat在四個時區中以標準時間顯示時間戳記的值？ 我希望能夠在使用者給定的時區中顯示時間戳記。我注意到，即使使用像date-fns-tz這樣的專用庫，它似乎也會傳回沒有意義的值。在幕後他們顯然使用Intl，當我使用該模組時，它似乎...
來自於 2024-03-31 12:28:02
0
1
336
未捕獲錯誤：無效日期：21/01/2023 使用 DateTIme Picker 進行反應 我無法判斷這裡的問題是什麼，因為我已按照文件實現該反應日期時間選擇器，但是當我選擇日期時，它顯示無效日期未捕獲錯誤：無效日期：17/01/2023，我做錯了什麼importDate...
來自於 2024-03-30 22:58:54
0
1
297
取得輸入類型為日期的最大屬性 我試圖將我的日期輸入最大屬性限制為流動的，以便它每年都會發生變化。不像現在那樣硬編碼。現在：<inputtype="date"@bind-value=&q...
來自於 2024-03-30 18:32:44
0
1
260
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！