JS使用setInterval計時器實現(xiàn)挑戰(zhàn)10秒
更新時間：2020年11月08日 09:52:22 作者：花落(→)凋謝
這篇文章主要為大家詳細(xì)介紹了JS使用setInterval計時器實現(xiàn)挑戰(zhàn)10秒，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JS實現(xiàn)挑戰(zhàn)10秒，主要用到setInterval計時器，供大家參考，具體內(nèi)容如下
效果圖
## 完整代碼
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js計時器</title>
</head>
<body>
<p style="font-size: 2em;color: blue;font-style: italic;">挑戰(zhàn)10.00秒</p>
<p id="time" style="font-size: 2em;color: red;">00:00</p>
<input type="button" value="開始" onclick="oStart()">
<input type="button" value="結(jié)束" onclick="oStop()">
<input type="button" value="重置" onclick="oReset()">
<script>
var n= 0, timer=null;
var txt=document.getElementById("time");
//開始計時
function oStart() {
clearInterval(timer);
timer=setInterval(function () {
n++;
var m=parseInt(n/60);
var s=parseInt(n%60);
txt.innerText=toDub(m)+":"+toDub(s);
},1000/60);
};
//暫停并且清空計時器
function oStop() {
clearInterval(timer);
// txt.innerText="我愛你";
}
//重置
function oReset() {
txt.innerText="00:00";
n=0;
}
//補零
function toDub(n){
return n<10?"0"+n:n;
}
</script>
</body>
</html>
更多關(guān)于倒計時的文章請查看專題： 《倒計時功能》
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
javascript提取文本框內(nèi)容到另一個文本框，經(jīng)常被用來做內(nèi)容簡介的讀取，這樣編輯就不用每次都去處理一篇文章的簡介了。2011-01-01
用javascript實現(xiàn)的激活輸入框后隱藏初始內(nèi)容
用javascript實現(xiàn)的激活輸入框后隱藏初始內(nèi)容...2007-06-06
一些javascript常見函數(shù)，方便當(dāng)作學(xué)習(xí)參考2008-05-05
有時候我們需要在用戶進入頁面的時候，自動最大化，更好的體驗，省去用戶點擊最大化按鈕，很多文章內(nèi)容網(wǎng)站都加了這個代碼2013-05-05
這篇文章主要為大家詳細(xì)介紹了JS實現(xiàn)拖動模糊框特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-08-08
js 提交form表單和設(shè)置form表單請求路徑的實現(xiàn)方法
下面小編就為大家?guī)硪黄猨s 提交form表單和設(shè)置form表單請求路徑的實現(xiàn)方法。2016-10-10
無循環(huán) JavaScript(map、reduce、filter和find)
本文由淺入深地介紹了map、reduce、filter和find函數(shù)，如何一步一步把循環(huán)從代碼中抽離掉2017-04-04
這篇文章主要為大家詳細(xì)介紹了JavaScript前端中的常見異常以及如何捕獲這些異常,文中的示例代碼講解詳細(xì),需要的小伙伴可以參考一下2024-03-03
下面小編就為大家?guī)硪黄猨s獲取元素下的第一級子元素的方法(推薦)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-03-03
這篇文章主要介紹了JS實現(xiàn)的判斷方法、變量是否存在功能,涉及javascript針對變量、方法判斷與異常處理操作技巧,需要的朋友可以參考下2018-05-05