JS使用setInterval計(jì)時(shí)器實(shí)現(xiàn)挑戰(zhàn)10秒

更新時(shí)間：2020年11月08日 09:52:22 作者：花落(→)凋謝

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

JS實(shí)現(xiàn)挑戰(zhàn)10秒，主要用到setInterval計(jì)時(shí)器，供大家參考，具體內(nèi)容如下

效果圖

## 完整代碼

<html lang="en">
<head>
<meta charset="UTF-8">
<title>js計(jì)時(shí)器</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="開(kāi)始" 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");
 //開(kāi)始計(jì)時(shí)
 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);
 };
 //暫停并且清空計(jì)時(shí)器
 function oStop() {
  clearInterval(timer);
//  txt.innerText="我愛(ài)你";
 }
 //重置
 function oReset() {
   txt.innerText="00:00";
  n=0;
 }
 //補(bǔ)零
 function toDub(n){
  return n<10?"0"+n:n;
 }
</script>
</body>
</html>

更多關(guān)于倒計(jì)時(shí)的文章請(qǐng)查看專題：《倒計(jì)時(shí)功能》

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

您可能感興趣的文章:

相關(guān)文章

js獲取Element元素的四種常用方法
本文主要介紹了js獲取Element元素的四種常用方法,通過(guò)介紹getElementById、getElementsByClassName、getElementsByTagName和querySelector等方法,幫助讀者了解如何通過(guò)不同的方式獲取頁(yè)面中的元素,感興趣的可以了解一下
2023-08-08
JS腳本實(shí)現(xiàn)動(dòng)態(tài)給標(biāo)簽控件添加事件的方法
這篇文章主要介紹了JS腳本實(shí)現(xiàn)動(dòng)態(tài)給標(biāo)簽控件添加事件的方法,結(jié)合實(shí)例形式分析了javascript添加事件監(jiān)聽(tīng)的相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2016-06-06
CocosCreator經(jīng)典入門項(xiàng)目之flappybird
這篇文章主要介紹了CocosCreator經(jīng)典入門項(xiàng)目之flappybird，詳細(xì)說(shuō)明了制作的每個(gè)步驟，還有詳盡的代碼，對(duì)CocosCreator感興趣的同學(xué)，一定要看一下
2021-04-04
JS實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)標(biāo)簽頁(yè)切換效果的相關(guān)資料，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-05-05
Javascript 八進(jìn)制轉(zhuǎn)義字符(8進(jìn)制)
最近在看一些Javascript玩魔術(shù)的資料，感嘆那些真正的是在玩技術(shù)，相當(dāng)讓人佩服。
2011-04-04
純javascript實(shí)現(xiàn)選擇框的全選與反選功能
這篇文章主要介紹了純javascript實(shí)現(xiàn)選擇框的全選與反選 ,需要的朋友可以參考下
2019-04-04
TypeScript如何開(kāi)啟嚴(yán)格空值檢查
這篇文章主要介紹了TypeScript如何開(kāi)啟嚴(yán)格空值檢查，文章圍繞TypeScript的相關(guān)資料展開(kāi)詳情內(nèi)容，需要的小伙伴可以參考一下
2022-03-03
原生js的ajax和解決跨域的jsonp(實(shí)例講解)
下面小編就為大家?guī)?lái)一篇原生js的ajax和解決跨域的jsonp(實(shí)例講解)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-10-10
JavaScript：ES2019 的新特性(譯)
這篇文章主要介紹了JavaScript：ES2019 的新特性(譯),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
使用JS實(shí)現(xiàn)一個(gè)功能豐富的待辦事項(xiàng)應(yīng)用
在日常工作和生活中,我們經(jīng)常需要處理各種各樣的待辦事項(xiàng),這篇文章主要為大家詳細(xì)介紹了如何使用JavaScript實(shí)現(xiàn)一個(gè)功能豐富的待辦事項(xiàng)應(yīng)用,需要的可以了解下
2024-01-01