JavaScript實現(xiàn)秒殺時鐘倒計時
更新時間：2019年09月29日 08:31:12 作者：小羽向前跑
這篇文章主要為大家詳細(xì)介紹了JavaScript實現(xiàn)秒殺時鐘倒計時，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)秒殺時鐘倒計時的具體代碼，供大家參考，具體內(nèi)容如下
功能介紹：
1.時/分/秒倒計時直至為零
所有代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>倒計時</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">
//倒計時
var count = 1;
var Counter;
function countDown(){ //調(diào)用
Counter = setInterval(f,1000);
}
countDown(); //自運行
//倒計時
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時鐘特效點擊查看：JavaScript時鐘特效專題
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript是一種解釋型語言，所以能無法達到和C/Java之類的水平，限制了它能在客戶端所做的事情，為了能改進他的性能，我想基于我以前給JavaScript做過的很多測試來談?wù)勛约旱慕?jīng)驗，希望能幫助大家改進自己的JavaScript腳本性能。2007-02-02
滾動條高度如何獲取，方法有很多，在本文將為大家詳細(xì)介紹下如何使用js做到，下面有個不錯的示例，感興趣的朋友不要錯過2013-10-10
這篇文章主要給大家介紹了關(guān)于JavaScript中極易出錯的操作符運算的相關(guān)資料,包括了算術(shù)運算符、比較運算符、邏輯運算符、賦值運算符、一元運算符以及運算優(yōu)先級等問題,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了在使用遞歸的情況下thinkphp實現(xiàn)無限分類，感興趣的小伙伴們可以參考一下2015-12-12
今天小編就為大家分享一篇關(guān)于Javascript讀寫cookie的實例源碼，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧
2019-03-03 
基于chosen插件實現(xiàn)人員選擇樹搜索自動篩選功能
這篇文章主要介紹了基于chosen插件實現(xiàn)人員選擇樹搜索自動篩選功能的相關(guān)資料,需要的朋友可以參考下
2016-09-09 
深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞
這篇文章主要介紹了深入淺析JavaScript中數(shù)據(jù)共享和數(shù)據(jù)傳遞的相關(guān)資料,需要的朋友可以參考下
2016-04-04 
微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問題
小程序文件上傳還是有點麻煩的,其實主要還是小程序?qū)Φ慕涌谟兄T多的不便,比如說,文件不能批量提交,只能一個個的提交,小程序的上傳需要專門的接口,這篇文章主要介紹了微信小程序多文件上傳 Tdesign及導(dǎo)入失敗問題,需要的朋友可以參考下
2023-11-11 
這篇文章主要給大家介紹了關(guān)于如何在微信小程序中實現(xiàn)Mixins方案的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用微信小程序具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06