js通過(guò)Date對(duì)象實(shí)現(xiàn)倒計(jì)時(shí)動(dòng)畫(huà)效果

更新時(shí)間：2017年10月27日 10:34:25 作者：Qiy

這篇文章主要為大家詳細(xì)介紹了js通過(guò)Date對(duì)象實(shí)現(xiàn)倒計(jì)時(shí)動(dòng)畫(huà)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

js通過(guò)Date對(duì)象實(shí)現(xiàn)倒計(jì)時(shí)效果，具體內(nèi)容如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>倒計(jì)時(shí)動(dòng)畫(huà)</title>
  <style>
    div{
      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+"時(shí)"+freeMinute+"分"+freeSecond+"秒";
      }
      else{
        document.getElementById("nowTime").innerHTML = "已結(jié)束";
      }
    }
  </script>
</head>
<body>
<div>
  <span id="nowTime"></span>
</div>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

js?通過(guò)Object.defineProperty()?定義和控制對(duì)象屬性
這篇文章主要介紹了js?通過(guò)Object.defineProperty()?定義和控制對(duì)象屬性，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，需要的朋友可以參考一下
2022-08-08
JavaScript變量作用域及內(nèi)存問(wèn)題實(shí)例分析
這篇文章主要介紹了JavaScript變量作用域及內(nèi)存問(wèn)題,結(jié)合實(shí)例形式分析了javascript全局變量、局部變量、塊級(jí)作用域等概念及內(nèi)存優(yōu)化問(wèn)題相關(guān)操作技巧,需要的朋友可以參考下
2019-06-06
js中數(shù)組解構(gòu)與對(duì)象解構(gòu)示例代碼
數(shù)組解構(gòu)是一種在 JavaScript 中從數(shù)組中提取值并將它們分配給變量的方式,在數(shù)組解構(gòu)中分為完全解構(gòu),不完全解構(gòu),解構(gòu)失敗以及解構(gòu)默認(rèn)值,這篇文章主要介紹了js中數(shù)組解構(gòu)與對(duì)象解構(gòu),需要的朋友可以參考下
2023-09-09
靜態(tài)頁(yè)面下用javascript操作ACCESS數(shù)據(jù)庫(kù)(讀增改刪)的代碼
[紅色]靜態(tài)頁(yè)面下用javascript操作ACCESS數(shù)據(jù)庫(kù)(讀增改刪)的代碼...
2007-05-05
js實(shí)現(xiàn)3D輪播圖效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)3D輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-10-10
最全面的百度地圖JavaScript離線版開(kāi)發(fā)
最全面的百度地圖JavaScript離線版開(kāi)發(fā),這篇文章主要為大家詳細(xì)介紹了JavaScript離線版開(kāi)發(fā)的相關(guān)資料,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2016-09-09
JS使用cookie保存用戶登錄信息操作示例
這篇文章主要介紹了JS使用cookie保存用戶登錄信息操作,結(jié)合具體實(shí)例形式分析了javascript使用cookie實(shí)現(xiàn)針對(duì)用戶信息的存儲(chǔ)與讀取相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
javascript使用正則表達(dá)式實(shí)現(xiàn)注冊(cè)登入校驗(yàn)
這篇文章主要為大家詳細(xì)介紹了javascript使用正則表達(dá)式實(shí)現(xiàn)注冊(cè)登入校驗(yàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-09-09
讓div運(yùn)動(dòng)起來(lái) js實(shí)現(xiàn)緩動(dòng)效果
讓div運(yùn)動(dòng)起來(lái)，這篇文章主要介紹了js實(shí)現(xiàn)緩動(dòng)效果的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-07-07
匹配html標(biāo)記的正則
匹配html標(biāo)記的正則...
2006-07-07