JavaScript實(shí)現(xiàn)秒殺時(shí)鐘倒計(jì)時(shí)
本文實(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)文章
JS中定時(shí)器的使用及頁(yè)面切換時(shí)定時(shí)器無法清除問題的解決辦法
定時(shí)器相信大家應(yīng)該都不陌生,下面這篇文章主要給大家介紹了關(guān)于JS中定時(shí)器的使用及頁(yè)面切換時(shí)定時(shí)器無法清除問題的解決辦法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-02-02
值得分享和收藏的xmlplus組件學(xué)習(xí)教程
值得分享和收藏的xmlplus組件學(xué)習(xí)教程,xmlplus是一個(gè)設(shè)計(jì)非常獨(dú)特 JavaScript 框架,用于快速開發(fā)前后端項(xiàng)目,感興趣的小伙伴們可以參考一下2017-05-05
JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過切換層效果的實(shí)例代碼
這篇文章主要是對(duì)JS+DIV實(shí)現(xiàn)鼠標(biāo)劃過切換層效果的實(shí)例代碼進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對(duì)大家有所幫助2013-11-11
HTML+JS實(shí)現(xiàn)監(jiān)控切屏功能
這篇文章主要介紹了如何利用HTML和JavaScript實(shí)現(xiàn)監(jiān)控切屏功能,監(jiān)控是否離開當(dāng)前頁(yè)面,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-03-03
微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實(shí)例詳解
這篇文章主要介紹了微信小程序授權(quán)獲取用戶詳細(xì)信息openid的實(shí)例詳解的相關(guān)資料,希望通過本文能幫助到大家,需要的朋友可以參考下2017-09-09

