快捷導(dǎo)航

js實(shí)現(xiàn)簡(jiǎn)單的倒計(jì)時(shí)

更新時(shí)間：2021年01月28日 11:09:07 作者：搬磚大法

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

本文實(shí)例為大家分享了js實(shí)現(xiàn)簡(jiǎn)單倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下

代碼：

<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./3.小于10補(bǔ)零封裝.js"></script>
  <style>
    div {
      float: left;
      width: 100px;
      height: 100px;
      background-color: #000;
      text-align: center;
      line-height: 100px;
      color: #fff;
      font-size: 30px;
      margin-right: 10px;
    }
  </style>
</head>
 
<body>
  <div></div>
  <div></div>
  <div></div>
  <div></div>
  <script>
    var div = document.getElementsByTagName('div');
    var inputTime = +new Date('2021-02-05 00:00:00'); //用戶輸入時(shí)間距離1970年1月1日 總毫秒數(shù)
    setInterval(countTime, 1000);
    countTime();
 
    function countTime() {
      var nowTime = +new Date(); //當(dāng)前時(shí)間距離1970年1月1日 總毫秒數(shù)
      // console.log(timer);
      var times = (inputTime - nowTime) / 1000; //秒
      var d = parseInt(times / 60 / 60 / 24); //天
      div[0].innerHTML = addZero(d) + '天';
      var h = parseInt(times / 60 / 60 % 24) //時(shí)
      div[1].innerHTML = addZero(h) + '時(shí)';
      var m = parseInt(times / 60 % 60); //分
      div[2].innerHTML = addZero(m) + '分';
      var s = parseInt(times % 60); //秒
      div[3].innerHTML = addZero(s) + '秒';
 
 
    }
  </script>
</body>
 
</html>

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

您可能感興趣的文章:

相關(guān)文章

使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條功能
Axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。這篇文章主要介紹了使用axios實(shí)現(xiàn)上傳圖片進(jìn)度條,需要的朋友可以參考下
2017-12-12
Unicode 編碼轉(zhuǎn)換器
Unicode 編碼轉(zhuǎn)換器...
2007-01-01
Javascript模仿淘寶信用評(píng)價(jià)實(shí)例(附源碼)
這篇文章主要介紹了Javascript模仿淘寶信用評(píng)價(jià)功能實(shí)現(xiàn)方法,以完整實(shí)例形式分析了JavaScript響應(yīng)鼠標(biāo)事件動(dòng)態(tài)改變頁(yè)面元素的相關(guān)技巧,并附帶了完整的實(shí)例代碼供讀者下載參考,需要的朋友可以參考下
2015-11-11
基于邏輯運(yùn)算的簡(jiǎn)單權(quán)限系統(tǒng)(實(shí)現(xiàn)) JS 版
基于邏輯運(yùn)算的簡(jiǎn)單權(quán)限系統(tǒng)(實(shí)現(xiàn)) JS 版...
2007-03-03
使用pjax實(shí)現(xiàn)無刷新更改頁(yè)面url
pjax=pushState+ajax，相信用過github的同學(xué)都知道，github部分頁(yè)面采用了pjax這個(gè)項(xiàng)目來實(shí)現(xiàn)ajax無刷新加載的同時(shí)改變頁(yè)面url。一起來學(xué)習(xí)一下這個(gè)插件吧。
2015-02-02
前端用echarts繪制含有多個(gè)分層的波形圖關(guān)鍵代碼
每次實(shí)現(xiàn)各種圖表時(shí),總會(huì)用到echarts,不得不說確實(shí)是一個(gè)非常好用的開源庫(kù),這篇文章主要給大家介紹了關(guān)于前端用echarts繪制含有多個(gè)分層的波形圖的相關(guān)資料,需要的朋友可以參考下
2024-03-03
JavaScript實(shí)現(xiàn)抖音羅盤時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)抖音羅盤時(shí)鐘，特別實(shí)用的效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2019-10-10
Javascript中的prototype與繼承
本文主要介紹了Javascript中的prototype與繼承，具有一定的參考價(jià)值，下面跟著小編一起來看下吧
2017-02-02
微信小程序支付及退款流程詳解
近期在做微信小程序時(shí)，涉及到了小程序的支付和退款流程，所以也大概的將這方面的東西看了一個(gè)遍，就在這篇文章里總結(jié)一下
2017-11-11
JavaScript中的事件處理程序
這篇文章介紹了JavaScript中的事件處理程序，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-04-04