JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)
更新時(shí)間：2019年09月29日 08:31:12 作者：小羽向前跑
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)的具體代碼，供大家參考，具體內(nèi)容如下
功能介紹：
1.時(shí)/分/秒倒計(jì)時(shí)直至為零
所有代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒計(jì)時(shí)</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
span{
display: inline-block;
width: 60px;
height: 60px;
border-radius: 50%;
background: black;
color: white;
font-size: 30px;
text-align: center;
line-height: 60px;
}
i{
font-style: normal;
font-size: 20px;
}
</style>
</head>
<body>
<span id="hs">1</span>
<i>:</i>
<span id="ms">59</span>
<i>:</i>
<span id="ss">47</span>
</body>
</html>
<script type="text/javascript">
//倒計(jì)時(shí)
var count = 1;
var Counter;
function countDown(){ //調(diào)用
Counter = setInterval(f,1000);
}
countDown(); //自運(yùn)行
//倒計(jì)時(shí)
function f(){
var hs = Number(document.getElementById("hs").innerHTML);
var ms = Number(document.getElementById("ms").innerHTML);
var ss = Number(document.getElementById("ss").innerHTML);
if(hs==0&&ms==0&&ss==0||ss>60||ms>60||hs>24){
var hs = document.getElementById("hs").innerHTML = "00";
var ms = document.getElementById("ms").innerHTML = "00";
var ss = document.getElementById("ss").innerHTML = "00";
clearInterval(Counter);
console.log(count);
return;
}
if(ss>0){
ss--;
document.getElementById("ss").innerHTML = ss;
count++;
}
if(ss==0){
if(ms>0){
ms--;
document.getElementById("ms").innerHTML = ms;
document.getElementById("ss").innerHTML = 59;
}
}
if(ms==0){
if(hs>0){
hs--;
document.getElementById("hs").innerHTML = hs;
document.getElementById("ms").innerHTML = 59;
}
}
}
</script>
更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專題
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JS秒殺倒計(jì)時(shí)功能完整實(shí)例【使用jQuery3.1.1】
- js實(shí)現(xiàn)京東秒殺倒計(jì)時(shí)功能
- PHP+JS實(shí)現(xiàn)的商品秒殺倒計(jì)時(shí)用法示例
- javascript時(shí)間排序算法實(shí)現(xiàn)活動(dòng)秒殺倒計(jì)時(shí)效果
- Javascript實(shí)現(xiàn)商品秒殺倒計(jì)時(shí)（時(shí)間與服務(wù)器時(shí)間同步）
- C#結(jié)合JavaScript實(shí)現(xiàn)秒殺倒計(jì)時(shí)的方法
- javascript 實(shí)現(xiàn) 秒殺,團(tuán)購(gòu) 倒計(jì)時(shí)展示的記錄 分享
- js實(shí)現(xiàn)倒計(jì)時(shí)秒殺效果
相關(guān)文章
JavaScript是一種解釋型語(yǔ)言，所以能無(wú)法達(dá)到和C/Java之類的水平，限制了它能在客戶端所做的事情，為了能改進(jìn)他的性能，我想基于我以前給JavaScript做過(guò)的很多測(cè)試來(lái)談?wù)勛约旱慕?jīng)驗(yàn)，希望能幫助大家改進(jìn)自己的JavaScript腳本性能。2007-02-02
滾動(dòng)條高度如何獲取，方法有很多，在本文將為大家詳細(xì)介紹下如何使用js做到，下面有個(gè)不錯(cuò)的示例，感興趣的朋友不要錯(cuò)過(guò)2013-10-10
JavaScript中極易出錯(cuò)的操作符運(yùn)算總結(jié)
這篇文章主要給大家介紹了關(guān)于JavaScript中極易出錯(cuò)的操作符運(yùn)算的相關(guān)資料,包括了算術(shù)運(yùn)算符、比較運(yùn)算符、邏輯運(yùn)算符、賦值運(yùn)算符、一元運(yùn)算符以及運(yùn)算優(yōu)先級(jí)等問(wèn)題,需要的朋友可以參考下2021-08-08
thinkphp實(shí)現(xiàn)無(wú)限分類（使用遞歸）
這篇文章主要介紹了在使用遞歸的情況下thinkphp實(shí)現(xiàn)無(wú)限分類，感興趣的小伙伴們可以參考一下2015-12-12
今天小編就為大家分享一篇關(guān)于Javascript讀寫cookie的實(shí)例源碼，小編覺(jué)得內(nèi)容挺不錯(cuò)的，現(xiàn)在分享給大家，具有很好的參考價(jià)值，需要的朋友一起跟隨小編來(lái)看看吧
2019-03-03 
基于chosen插件實(shí)現(xiàn)人員選擇樹搜索自動(dòng)篩選功能
這篇文章主要介紹了基于chosen插件實(shí)現(xiàn)人員選擇樹搜索自動(dòng)篩選功能的相關(guān)資料,需要的朋友可以參考下
2016-09-09 
深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞
這篇文章主要介紹了深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞的相關(guān)資料,需要的朋友可以參考下
2016-04-04 
微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問(wèn)題
小程序文件上傳還是有點(diǎn)麻煩的,其實(shí)主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說(shuō),文件不能批量提交,只能一個(gè)個(gè)的提交,小程序的上傳需要專門的接口,這篇文章主要介紹了微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問(wèn)題,需要的朋友可以參考下
2023-11-11 
如何在微信小程序中實(shí)現(xiàn)Mixins方案
這篇文章主要給大家介紹了關(guān)于如何在微信小程序中實(shí)現(xiàn)Mixins方案的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06