JavaScript實現(xiàn)秒殺時鐘倒計時
更新時間：2019年09月29日 08:31:12 作者：小羽向前跑
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)秒殺時鐘倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了JavaScript實現(xiàn)秒殺時鐘倒計時的具體代碼，供大家參考，具體內容如下
功能介紹：
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時鐘特效專題
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
這篇文章主要介紹了js獲取 gif 的幀數(shù)的代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
定時器相信大家應該都不陌生,下面這篇文章主要給大家介紹了關于JS中定時器的使用及頁面切換時定時器無法清除問題的解決辦法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2023-02-02
本文我們將和大家淺聊一下為什么能用RxJS取代Redux,RxJS 在現(xiàn)在的前端用比較少,但是 RxJS 作為響應式和函數(shù)式編程的集大成者,似乎被前端開發(fā)者遺忘,可能是學習難度大,可能是有更加方便的解決方案,需要的朋友可以參考下2024-02-02
值得分享和收藏的xmlplus組件學習教程,xmlplus是一個設計非常獨特 JavaScript 框架，用于快速開發(fā)前后端項目，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要介紹了微信小程序 TLS 版本必須大于等于1.2問題解決的相關資料,需要的朋友可以參考下2017-02-02
這篇文章主要是對JS+DIV實現(xiàn)鼠標劃過切換層效果的實例代碼進行了詳細的介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-11-11
這篇文章主要介紹了如何利用HTML和JavaScript實現(xiàn)監(jiān)控切屏功能，監(jiān)控是否離開當前頁面，文中的示例代碼講解詳細，需要的可以參考一下2022-03-03
這篇文章主要為大家詳細介紹了微信小程序實現(xiàn)分頁加載效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章主要介紹了微信小程序授權獲取用戶詳細信息openid的實例詳解的相關資料,希望通過本文能幫助到大家，需要的朋友可以參考下2017-09-09
這篇文章介紹了GRID拖拽行的實例代碼，有需要的朋友可以參考一下2013-07-07