js定時器實現(xiàn)倒計時效果

更新時間：2017年11月05日 17:01:50 作者：Stacey揚

這篇文章主要為大家詳細(xì)介紹了js定時器實現(xiàn)倒計時效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了js定時器實現(xiàn)倒計時效果展示的具體代碼，供大家參考，具體內(nèi)容如下

日期函數(shù)

倒計時 = 用將來的時間 - 現(xiàn)在的時間

問題：將來時間距離 1970 毫秒數(shù) - 現(xiàn)在距離 1970年1

用將來的毫秒數(shù) - 現(xiàn)在的毫秒數(shù) 不斷轉(zhuǎn)換就可以了

<!DOCTYPE html>
<html>
<head lang="en">
 <meta charset="UTF-8">
 <title></title>
 <style>
 body{
  font-size:30px;
  text-align: center;
  color:red;
 }
 </style>
 <script>
 window.onload = function(){
  var demo = document.getElementById("demo");
  var endTime = new Date("2017/11/12 17:30:00"); // 最終時間
  setInterval(clock,1000); // 開啟定時器
  function clock(){
  var nowTime = new Date(); // 一定是要獲取最新的時間
  // console.log(nowTime.getTime()); 獲得自己的毫秒
  var second = parseInt((endTime.getTime() - nowTime.getTime()) / 1000);
  // 用將來的時間毫秒 - 現(xiàn)在的毫秒 / 1000 得到的 還剩下的秒 可能處不斷 取整
  // console.log(second);
   // 一小時 3600 秒
  // second / 3600 一共的小時數(shù) /24 天數(shù)
  var d = parseInt(second / 3600 / 24); //天數(shù)
  //console.log(d);
  var h = parseInt(second / 3600 % 24) // 小時
  // console.log(h);
  var m = parseInt(second / 60 );
  //console.log(m);
  var s = parseInt(second ); // 當(dāng)前的秒
  console.log(s);
  /* if(d<10)
  {
   d = "0" + d;
  }*/
  d<10 ? d="0"+d : d;
  h<10 ? h="0"+h : h;
  m<10 ? m="0"+m : m;
  s<10 ? s="0"+s : s;
  demo.innerHTML = "距離搶購時間還剩: "+d+"天 "+h+"小時 "+m+"分鐘 "+s+"秒";

  }
 }
 </script>
</head>
<body>
<div id="demo"></div>
</body>
</html>

更多內(nèi)容請參考：js實現(xiàn)倒計時功能匯總

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
倒計時

相關(guān)文章

詳解JavaScript對數(shù)組操作（添加/刪除/截取/排序/倒序）
這篇文章主要介紹了JavaScript對數(shù)組操作，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
js module大戰(zhàn)
這篇文章主要介紹了js module，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
IE關(guān)閉時判斷及AJAX注銷案例學(xué)習(xí)
當(dāng)關(guān)閉系統(tǒng)時會提示:你確定要退出系統(tǒng)嗎？退出請按'離開此頁'接下來將講解下IE關(guān)閉判斷及AJAX注銷，感興趣的你可不要錯過了哈，希望本例對你學(xué)習(xí)ajax有所幫助
2013-02-02
javascript 打字游戲?qū)崿F(xiàn)代碼
javascript 打字游戲?qū)崿F(xiàn)代碼，非常不錯的效果，功能還不是很完善，喜歡的朋友可以參考下。
2010-04-04
JavaScript常用本地對象小結(jié)
這篇文章主要介紹了JavaScript常用本地對象小結(jié)的相關(guān)資料,需要的朋友可以參考下
2016-03-03
Javascript中的var_dump函數(shù)實現(xiàn)代碼
發(fā)現(xiàn)了一個非常好的JavaScript調(diào)試方法，目前看到的是可以打印Object/Array/Function/String四種類型，使用方法和PHP中的var_dump()一樣，只要直接dump(變量名)即可。
2009-09-09
ES6入門教程之let、const的使用方法
這篇文章主要給大家介紹了關(guān)于ES6入門教程之let、const使用的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用ES6具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
bootstrap table列和表頭對不齊的解決方法
這篇文章主要為大家詳細(xì)介紹了bootstrap table列和表頭對不齊的解決方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-07-07
動態(tài)統(tǒng)計當(dāng)前輸入內(nèi)容的字節(jié)、字符數(shù)的實例詳解
這篇文章主要介紹了動態(tài)統(tǒng)計當(dāng)前輸入內(nèi)容的字節(jié)、字符數(shù)的實例詳解的相關(guān)資料,希望通過本文能幫助到大家，讓大家實現(xiàn)這樣的功能，需要的朋友可以參考下
2017-10-10
javascript實現(xiàn)通過表格繪制顏色填充矩形的方法
這篇文章主要介紹了javascript實現(xiàn)通過表格繪制顏色填充矩形的方法,涉及javascript操作表格與樣式的相關(guān)技巧,需要的朋友可以參考下
2015-04-04