JS實(shí)現(xiàn)秒殺倒計(jì)時(shí)特效

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

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

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

知識點(diǎn)

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

運(yùn)行效果

代碼

引入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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

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