JS實現(xiàn)秒殺倒計時特效

更新時間：2020年01月02日 08:32:27 作者：KaiSarH

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

本文實例為大家分享了JS實現(xiàn)秒殺倒計時特效的具體代碼，供大家參考，具體內(nèi)容如下

知識點

添加一個定時器，對時間標簽不斷進行更新設(shè)置即可。
引入工具庫工具庫

運行效果

代碼

引入MyTool.js

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div{
      font-size: 30px;
    }
    span{
      background-color: #000;
      color: #fff;
      border-radius: 10px;
      padding: 0 5px;
    }
  </style>
</head>
<body>
<div id="box">
  <span>00</span>:<span>00</span>:<span>00</span>
</div>
<script src="../00MyTools/MyTools.js"></script>
<script>
  window.addEventListener('load',function (ev) {
    var hour = myTool.$('box').children[0], min = myTool.$('box').children[1], sec = myTool.$('box').children[2];
    var time = 8 * 60 * 60;
    var timer = setInterval(function () {
      time--;
      hour.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).hour);
      min.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).min);
      sec.innerText = myTool.addZero(myTool.secondToHourMinSecond(time).second);
      if (time===0){
        clearInterval(timer);
      }
    },1000);
  },false);
</script>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

javascript 方法一些使用方法
javascript 方法一些使用方法,注意看下他的函數(shù)。
2009-05-05
javascript:void(0)是什么意思及href=#與href=javascriptvoid(0)的區(qū)別
Javascript中void是一個操作符，該操作符指定要計算一個表達式但是不返回值，本文給大家介紹javascript:void(0)是什么意思及href=#與href=javascriptvoid(0)的區(qū)別，需要的朋友參考下
2015-11-11
由 element.appendChild(newNode) ,談開去
由 element.appendChild(newNode) ,談開去...
2006-11-11
JavaScript中arguments的使用方法詳解
這篇文章主要給大家介紹了關(guān)于JavaScript中arguments的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
webpack+vue2構(gòu)建vue項目骨架的方法
本篇文章主要介紹了webpack+vue2構(gòu)建vue項目骨架的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2018-01-01
JavaScript?引用類型之原始值包裝類型String
這篇文章主要介紹了JavaScript?引用類型之原始值包裝類型String,String是對應字符串的引用類型。要創(chuàng)建一個String?對象，使用String?構(gòu)造函數(shù)并傳入一個數(shù)值,更多相關(guān)內(nèi)容需要的朋友可以參考一下
2022-07-07
javascript學習筆記之函數(shù)定義
本文主要給大家介紹了javascript的一些函數(shù)定義方面的基礎(chǔ)知識，包括函數(shù)聲明式、函數(shù)表達式、Function 構(gòu)造函數(shù)等，十分的簡單實用，有需要的小伙伴可以參考下。
2015-06-06
深入了解TypeScript中的映射類型
在?TypeScript?中，映射類型可以幫助我們避免編寫重復的代碼，它可以根據(jù)現(xiàn)有類型和定義的一些規(guī)則來創(chuàng)建新類型。本文我們就來看一下什么是映射類型以及如何構(gòu)建自己的映射類型
2022-08-08
詳解uniapp無痛刷新token方法
為了給用戶一個流暢的體驗,token過期后需要重新請求新的token替換過期的token。本文將詳細介紹uniapp無痛刷新token方法。
2021-06-06
JS畫線(實例代碼)
這篇文章主要是對JS畫線的實例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助
2013-11-11