您好,登錄后才能下訂單哦!
本文實(shí)例為大家分享了javascript實(shí)現(xiàn)秒表計(jì)時(shí)的具體代碼,供大家參考,具體內(nèi)容如下
實(shí)現(xiàn)圖片:
分+秒+跑秒
時(shí)+分+秒+跑秒
需求分析:
1、顯示整個(gè)秒表頁面;
2、在點(diǎn)擊“開始”按鈕之后,開始計(jì)時(shí),并將按鈕轉(zhuǎn)為“暫?!卑粹o,在點(diǎn)擊“暫?!卑粹o之后,將按鈕轉(zhuǎn)為“開始”按鈕,并停止計(jì)時(shí);
3、在點(diǎn)擊“復(fù)位”按鈕之后,將顯示的計(jì)時(shí)清零,并將按鈕變回“開始”按鈕。
頁面結(jié)構(gòu):
<div id="miaoBiao"> <div id="dingShi"> <p> <!-- <span id="houer">00</span> : --> <span id="minute">00</span> : <span id="second">00</span>  <span id="msecond">00</span> </p> <!-- 顯示:時(shí):分:秒 跑秒 ,“時(shí)”解除注釋可使用 --> <button id="btn1">開始</button> <button id="reset">復(fù)位</button> </div> </div>
頁面的主體結(jié)構(gòu)主要包括四個(gè)span,包含四個(gè)秒表上顯示的時(shí)間;以及兩個(gè)按鈕:“開始/暫停”與“復(fù)位”按鈕。
一些函數(shù):
id節(jié)點(diǎn)調(diào)用函數(shù)
function jieDian(id){ return document.getElementById(id); }
通過調(diào)用此函數(shù)可以簡化頁面代碼
開始運(yùn)行函數(shù)
function startBtn(){ timer1=setInterval(function(){ i++ jieDian("msecond").innerHTML =doubleLing(i%100); jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ; jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ; jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ; },10) } //開始運(yùn)行函數(shù)
暫停函數(shù)
function pasueBtn(){ clearInterval(timer1) }
賦0函數(shù)
function doubleLing(i){ if(i<10){ return "0"+i }else{ return i } } //賦0函數(shù),當(dāng)時(shí)分秒顯示為個(gè)位數(shù)時(shí),在前面加上“0”
完整代碼,復(fù)制可用:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #miaoBiao{ width: 550px;height: 450px;background-color: #1d262d;overflow: hidden; margin: 50px auto;border-radius: 150px; } #dingShi{ width: 400px;height: 230px;background-color:#d0eaeb;text-align: center; padding-top: 0px;margin: 110px auto;border-radius: 40px; } #dingShi p{ font-size: 40px;padding-top: 40px; } #minute,#second,#houer{ font-size: 56px; } #dingShi button{ width: 80px;height: 35px;background-color: orange;margin: 10px auto; line-height: 35px;font-weight: bold;margin: 0px 20px; } </style> </head> <body> <div id="miaoBiao"> <div id="dingShi"> <p> <span id="houer">00</span> : <span id="minute">00</span> : <span id="second">00</span>  <span id="msecond">00</span> </p> <!-- 顯示:時(shí):分:秒 跑秒 ,“時(shí)”解除注釋可使用 --> <button id="btn1">開始</button> <button id="reset">復(fù)位</button> </div> </div> <script> var i = 0; var timer1=null; var isRunning =false; //isRunning用于判斷當(dāng)前是否正在運(yùn)行 function jieDian(id){ return document.getElementById(id); } //id節(jié)點(diǎn)調(diào)用函數(shù) function startBtn(){ timer1=setInterval(function(){ i++ jieDian("msecond").innerHTML =doubleLing(i%100); jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ; jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ; jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ; },10) } //開始運(yùn)行函數(shù) function pasueBtn(){ clearInterval(timer1) } //暫停函數(shù) jieDian("btn1").onclick = function(){ if(!isRunning){ jieDian("btn1").innerHTML = "暫停"; isRunning = true; startBtn(); }else{ jieDian("btn1").innerHTML="開始"; isRunning = false; pasueBtn(); } } //“開始”與“暫?!秉c(diǎn)擊按鈕: //當(dāng)按鈕顯示為“開始”,點(diǎn)擊之后,將按鈕轉(zhuǎn)為“暫?!卑粹o,并觸發(fā)相應(yīng)條件; //當(dāng)按鈕顯示為“暫停”,點(diǎn)擊之后,將按鈕轉(zhuǎn)為“開始”按鈕,并觸發(fā)相應(yīng)條件。 jieDian("reset").onclick =function(){ clearInterval(timer1) i = 0; isRunning = false; jieDian("btn1").innerHTML="開始"; jieDian("msecond").innerHTML ="00"; jieDian("second").innerHTML ="00"; jieDian("minute").innerHTML ="00"; jieDian("houer").innerHTML ="00"; } //復(fù)位按鈕,點(diǎn)擊之后將秒表各值復(fù)位,并“暫?!泵氡? function doubleLing(i){ if(i<10){ return "0"+i }else{ return i } } //賦0函數(shù),當(dāng)時(shí)分秒顯示為個(gè)位數(shù)時(shí),在前面加上“0” </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。