本文實例為大家分享了JavaScript實現秒殺時鐘倒計時的具體代碼，供大家參考，具體內容如下
功能介紹：
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(){ //調用
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時鐘特效專題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
