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