Javascript實(shí)現(xiàn)秒表倒計(jì)時(shí)功能

更新時(shí)間：2018年11月17日 09:36:38 作者：梵海pp

這篇文章主要為大家詳細(xì)介紹了Javascript實(shí)現(xiàn)秒表倒計(jì)時(shí)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了js實(shí)現(xiàn)秒表倒計(jì)時(shí)的具體代碼，供大家參考，具體內(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í)間函數(shù)，讓秒表每100ms變化一次
 timer =setInterval("onTimer()", 100);//100ms的定時(shí)器
 }

 function onTimer()
 {
 if (start1 == finish)//如果倒計(jì)時(shí)結(jié)束清除時(shí)間函數(shù)
 {
  clearInterval(timer);
  start1="00:00:00:10";//(清除時(shí)間函數(shù)后還是會(huì)執(zhí)行一次 所以多給一個(gè)10ms再動(dòng)態(tài)賦值)
 }

 var hms = new String(start1).split(":");//以:作為分隔符號(hào)取字符串內(nèi)的數(shù)據(jù)
 var ms = new Number(hms[3]);//給每個(gè)數(shù)據(jù)定義對(duì)象
 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)//判斷時(shí)間并進(jìn)行變化
 {
  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)個(gè)位數(shù)給個(gè)位數(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)于倒計(jì)時(shí)的文章請(qǐng)查看專(zhuān)題：《倒計(jì)時(shí)功能》

更多JavaScript時(shí)鐘特效點(diǎn)擊查看：JavaScript時(shí)鐘特效專(zhuān)題

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

地址欄傳遞中文參數(shù)亂碼在js里用escape轉(zhuǎn)碼
亂碼，頭大的一件事可以考慮轉(zhuǎn)碼方式不直接傳中文，在js里用escape轉(zhuǎn)碼，具體實(shí)現(xiàn)如下，有類(lèi)似情況的朋友可以參考下
2013-08-08
javascript實(shí)現(xiàn)劃詞標(biāo)記+劃詞搜索功能
javascript實(shí)現(xiàn)劃詞標(biāo)記+劃詞搜索功能...
2007-03-03
微信小程序與axios組成網(wǎng)絡(luò)層封裝過(guò)程詳解
小程序在網(wǎng)絡(luò)層提供的API是能夠完成一個(gè)程序與服務(wù)端交互的完整鏈路，但需要大量的定制化代碼，才能實(shí)現(xiàn)請(qǐng)求攔截和響應(yīng)攔截，不太符合大多數(shù)開(kāi)發(fā)者的使用習(xí)慣，對(duì)于前端開(kāi)發(fā)者來(lái)說(shuō)，網(wǎng)絡(luò)層還得是axios
2023-02-02
JS使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單
這篇文章主要介紹了JS使用iView的Dropdown實(shí)現(xiàn)一個(gè)右鍵菜單功能，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
JavaScript 字符串常用操作小結(jié)(非常實(shí)用)
這篇文章主要介紹了JavaScript 字符串常用操作的知識(shí),包括字符串截取，查找類(lèi)的方法，對(duì)js字符串操作相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
2016-11-11
JavaScript棧和隊(duì)列相關(guān)操作與實(shí)現(xiàn)方法詳解
這篇文章主要介紹了JavaScript棧和隊(duì)列相關(guān)操作與實(shí)現(xiàn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript棧和隊(duì)列的概念、原理、定義、用法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2018-12-12
Javascript原型鏈和原型的一個(gè)誤區(qū)
這篇文章主要介紹了Javascript原型鏈和原型的一個(gè)誤區(qū),需要的朋友可以參考下
2014-10-10
微信小程序?qū)崿F(xiàn)點(diǎn)贊、取消點(diǎn)贊功能
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點(diǎn)贊、取消點(diǎn)贊，和多項(xiàng)點(diǎn)擊功能，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
js實(shí)現(xiàn)的萬(wàn)能flv網(wǎng)頁(yè)播放器代碼
這篇文章主要介紹了js實(shí)現(xiàn)的萬(wàn)能flv網(wǎng)頁(yè)播放器代碼,以簡(jiǎn)單示例形式分析了JavaScript使用swfobject.js實(shí)現(xiàn)在線(xiàn)播放flv視頻的相關(guān)技巧,需要的朋友可以參考下
2016-04-04
JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法詳解【矩形情況】
這篇文章主要介紹了JS/HTML5游戲常用算法之碰撞檢測(cè) 包圍盒檢測(cè)算法,結(jié)合實(shí)例形式詳細(xì)分析了游戲算法中針對(duì)碰撞檢測(cè)的包盒矩形情況下的相關(guān)算法原理與操作注意事項(xiàng),需要的朋友可以參考下
2018-12-12