當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

一款好看的秒表计时器

發(fā)布時間：2023/12/8 编程问答 34 豆豆

生活随笔收集整理的這篇文章主要介紹了一款好看的秒表计时器小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

實現(xiàn)圖片：

分+秒+跑秒

時+分+秒+跑秒

需求分析：

1、顯示整個秒表頁面；

2、在點擊“開始”按鈕之后，開始計時，并將按鈕轉(zhuǎn)為“暫停”按鈕，在點擊“暫停”按鈕之后，將按鈕轉(zhuǎn)為“開始”按鈕，并停止計時；

3、在點擊“復(fù)位”按鈕之后，將顯示的計時清零，并將按鈕變回“開始”按鈕。

頁面結(jié)構(gòu)：

頁面的主體結(jié)構(gòu)主要包括四個span，包含四個秒表上顯示的時間；以及兩個按鈕：“開始/暫停”與“復(fù)位”按鈕。

一些函數(shù)：

id節(jié)點調(diào)用函數(shù)

function jieDian(id){return document.getElementById(id);}

通過調(diào)用此函數(shù)可以簡化頁面代碼

開始運行函數(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)}//開始運行函數(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ù)時，在前面加上“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>&ensp;<span id="msecond">00</span></p><button id="btn1">開始</button><button id="reset">復(fù)位</button></div></div><script>var i = 0;var timer1=null;var isRunning =false;//isRunning用于判斷當(dāng)前是否正在運行function jieDian(id){return document.getElementById(id);}//id節(jié)點調(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)}//開始運行函數(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();}}//“開始”與“暫停”點擊按鈕：//當(dāng)按鈕顯示為“開始”，點擊之后，將按鈕轉(zhuǎn)為“暫停”按鈕，并觸發(fā)相應(yīng)條件；//當(dāng)按鈕顯示為“暫停”，點擊之后，將按鈕轉(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ù)位按鈕，點擊之后將秒表各值復(fù)位，并“暫停”秒表function doubleLing(i){if(i<10){return "0"+i}else{return i}}//賦0函數(shù)，當(dāng)時分秒顯示為個位數(shù)時，在前面加上“0”</script> </body> </html>

總結(jié)

以上是生活随笔為你收集整理的一款好看的秒表计时器的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。