快捷導(dǎo)航

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)文章

js中如何往對(duì)象中添加屬性
這篇文章主要介紹了js中如何往對(duì)象中添加屬性，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-10-10
JS實(shí)現(xiàn)購(gòu)物車(chē)中商品總價(jià)計(jì)算
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)購(gòu)物車(chē)中商品總價(jià)的計(jì)算，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-03-03
微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫(kù)反饋的多條數(shù)據(jù)功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)用table顯示數(shù)據(jù)庫(kù)反饋的多條數(shù)據(jù)功能,涉及微信小程序wx.request訪問(wèn)php后臺(tái)及返回結(jié)果的顯示布局相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
淺談微信小程序flex布局基礎(chǔ)
這篇文章主要介紹了淺談微信小程序flex布局基礎(chǔ)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
JavaScript中常用的簡(jiǎn)潔高級(jí)技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于JavaScript中常用的簡(jiǎn)潔高級(jí)技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者使用Javascript具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-03-03
JavaScript for in錨點(diǎn)的動(dòng)態(tài)創(chuàng)建
主要包括for..in的使用,錨點(diǎn)的動(dòng)態(tài)創(chuàng)建,狀態(tài)欄文字效果
2008-09-09
實(shí)現(xiàn)非常簡(jiǎn)單的js雙向數(shù)據(jù)綁定
Angular實(shí)現(xiàn)了雙向綁定機(jī)制。所謂的雙向綁定，無(wú)非是從界面的操作能實(shí)時(shí)反映到數(shù)據(jù)，數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。本文給大家詳細(xì)介紹js雙向數(shù)據(jù)綁定，感興趣的朋友參考下
2015-11-11
如何自己實(shí)現(xiàn)JavaScript的new操作符
new大家肯定都不陌生，單身沒(méi)有對(duì)象的時(shí)候就new一個(gè)，很方便。那么它在創(chuàng)建實(shí)例的時(shí)候，具體做了哪些操作呢？今天我們就來(lái)一起分析一下。
2021-04-04
js預(yù)加載圖片方法匯總
這篇文章主要介紹了js預(yù)加載圖片方法,實(shí)例匯總了javascript實(shí)現(xiàn)預(yù)加載圖片的常用技巧,需要的朋友可以參考下
2015-06-06
JavaScript學(xué)習(xí)小結(jié)(7)之JS RegExp
在js中,正則表達(dá)式是由一個(gè)RegExp對(duì)象表示的，RegExp 是正則表達(dá)式的縮寫(xiě)。RegExp簡(jiǎn)單的模式可以是一個(gè)單獨(dú)的字符。更復(fù)雜的模式包括了更多的字符，并可用于解析、格式檢查、替換等等。可以使用一個(gè)RegExp()構(gòu)造函數(shù)來(lái)創(chuàng)建RegExp對(duì)象，也可以使用直接量語(yǔ)法
2015-11-11