快捷導(dǎo)航

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

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

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

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

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