Javascript實現(xiàn)秒表倒計時功能
更新時間：2018年11月17日 09:36:38 作者：梵海pp
這篇文章主要為大家詳細介紹了Javascript實現(xiàn)秒表倒計時功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了js實現(xiàn)秒表倒計時的具體代碼，供大家參考，具體內(nèi)容如下
效果圖：
代碼：
<html>
<body>
<span id="clock" style="font-size: 3em">00:30:00:00</span>
<script type="text/javascript">
var oclock=document.getElementById("clock");
var start1 = oclock.innerHTML;
var finish = "00:00:00:00";
var timer = null;
run();
function run() {//定義時間函數(shù)，讓秒表每100ms變化一次
timer =setInterval("onTimer()", 100);//100ms的定時器
}
function onTimer()
{
if (start1 == finish)//如果倒計時結(jié)束清除時間函數(shù)
{
clearInterval(timer);
start1="00:00:00:10";//(清除時間函數(shù)后還是會執(zhí)行一次 所以多給一個10ms再動態(tài)賦值)
}
var hms = new String(start1).split(":");//以:作為分隔符號取字符串內(nèi)的數(shù)據(jù)
var ms = new Number(hms[3]);//給每個數(shù)據(jù)定義對象
var s = new Number(hms[2]);
var m = new Number(hms[1]);
var h = new Number(hms[0]);
ms -= 10;//每次執(zhí)行ms減10
if (ms < 0)//判斷時間并進行變化
{
ms = 90;
s -= 1;
if (s < 0)
{
s = 59;
m -= 1;
}
if (m < 0)
{
m = 59;
h -= 1;
}
}
var ms = ms < 10 ? ("0" + ms) : ms;//如果出現(xiàn)個位數(shù)給個位數(shù)前面添加0
var ss = s < 10 ? ("0" + s) : s;
var sm = m < 10 ? ("0" + m) : m;
var sh = h < 10 ? ("0" + h) : h;
start1 = sh + ":" + sm + ":" + ss + ":" + ms;
oclock.innerHTML = start1;//重新給oclock賦值
}
</script>
</body>
</html>
更多關(guān)于倒計時的文章請查看專題：《倒計時功能》
更多JavaScript時鐘特效點擊查看：JavaScript時鐘特效專題
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
地址欄傳遞中文參數(shù)亂碼在js里用escape轉(zhuǎn)碼
亂碼，頭大的一件事可以考慮轉(zhuǎn)碼方式不直接傳中文，在js里用escape轉(zhuǎn)碼，具體實現(xiàn)如下，有類似情況的朋友可以參考下2013-08-08
javascript實現(xiàn)劃詞標記+劃詞搜索功能...2007-03-03
微信小程序與axios組成網(wǎng)絡(luò)層封裝過程詳解
小程序在網(wǎng)絡(luò)層提供的API是能夠完成一個程序與服務(wù)端交互的完整鏈路，但需要大量的定制化代碼，才能實現(xiàn)請求攔截和響應(yīng)攔截，不太符合大多數(shù)開發(fā)者的使用習(xí)慣，對于前端開發(fā)者來說，網(wǎng)絡(luò)層還得是axios2023-02-02
JS使用iView的Dropdown實現(xiàn)一個右鍵菜單
這篇文章主要介紹了JS使用iView的Dropdown實現(xiàn)一個右鍵菜單功能，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
JavaScript 字符串常用操作小結(jié)(非常實用)
這篇文章主要介紹了JavaScript 字符串常用操作的知識,包括字符串截取，查找類的方法，對js字符串操作相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-11-11
JavaScript棧和隊列相關(guān)操作與實現(xiàn)方法詳解
這篇文章主要介紹了JavaScript棧和隊列相關(guān)操作與實現(xiàn)方法,結(jié)合實例形式較為詳細的分析了javascript棧和隊列的概念、原理、定義、用法及相關(guān)操作注意事項,需要的朋友可以參考下2018-12-12
這篇文章主要介紹了Javascript原型鏈和原型的一個誤區(qū),需要的朋友可以參考下2014-10-10
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)點贊、取消點贊，和多項點擊功能，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
這篇文章主要介紹了js實現(xiàn)的萬能flv網(wǎng)頁播放器代碼,以簡單示例形式分析了JavaScript使用swfobject.js實現(xiàn)在線播放flv視頻的相關(guān)技巧,需要的朋友可以參考下2016-04-04
JS/HTML5游戲常用算法之碰撞檢測 包圍盒檢測算法詳解【矩形情況】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測 包圍盒檢測算法,結(jié)合實例形式詳細分析了游戲算法中針對碰撞檢測的包盒矩形情況下的相關(guān)算法原理與操作注意事項,需要的朋友可以參考下2018-12-12