JS實現(xiàn)秒殺倒計時特效
更新時間：2020年01月02日 08:32:27 作者：KaiSarH
這篇文章主要為大家詳細介紹了JS實現(xiàn)秒殺倒計時特效，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)秒殺倒計時特效的具體代碼，供大家參考，具體內(nèi)容如下
知識點
添加一個定時器，對時間標(biāo)簽不斷進行更新設(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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
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
這篇文章主要給大家介紹了關(guān)于JavaScript中arguments的使用方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-12-12
本篇文章主要介紹了webpack+vue2構(gòu)建vue項目骨架的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了JavaScript?引用類型之原始值包裝類型String,String是對應(yīng)字符串的引用類型。要創(chuàng)建一個String?對象，使用String?構(gòu)造函數(shù)并傳入一個數(shù)值,更多相關(guān)內(nèi)容需要的朋友可以參考一下2022-07-07
javascript學(xué)習(xí)筆記之函數(shù)定義
本文主要給大家介紹了javascript的一些函數(shù)定義方面的基礎(chǔ)知識，包括函數(shù)聲明式、函數(shù)表達式、Function 構(gòu)造函數(shù)等，十分的簡單實用，有需要的小伙伴可以參考下。2015-06-06
在?TypeScript?中，映射類型可以幫助我們避免編寫重復(fù)的代碼，它可以根據(jù)現(xiàn)有類型和定義的一些規(guī)則來創(chuàng)建新類型。本文我們就來看一下什么是映射類型以及如何構(gòu)建自己的映射類型2022-08-08
為了給用戶一個流暢的體驗,token過期后需要重新請求新的token替換過期的token。本文將詳細介紹uniapp無痛刷新token方法。2021-06-06
這篇文章主要是對JS畫線的實例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11