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

编程问答

一款好看的秒表计时器

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

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

實(shí)現(xiàn)圖片：

分+秒+跑秒

時(shí)+分+秒+跑秒

需求分析：

1、顯示整個(gè)秒表頁(yè)面；

2、在點(diǎn)擊“開(kāi)始”按鈕之后，開(kāi)始計(jì)時(shí)，并將按鈕轉(zhuǎn)為“暫停”按鈕，在點(diǎn)擊“暫停”按鈕之后，將按鈕轉(zhuǎn)為“開(kāi)始”按鈕，并停止計(jì)時(shí)；

3、在點(diǎn)擊“復(fù)位”按鈕之后，將顯示的計(jì)時(shí)清零，并將按鈕變回“開(kāi)始”按鈕。

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

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

一些函數(shù)：

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

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

通過(guò)調(diào)用此函數(shù)可以簡(jiǎn)化頁(yè)面代碼

開(kāi)始運(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)}//開(kāi)始運(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>&ensp;<span id="msecond">00</span></p><button id="btn1">開(kāi)始</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)}//開(kāi)始運(yùn)行函數(shù)function pasueBtn(){clearInterval(timer1)}//暫停函數(shù)jieDian("btn1").onclick = function(){if(!isRunning){jieDian("btn1").innerHTML = "暫停";isRunning = true;startBtn();}else{jieDian("btn1").innerHTML="開(kāi)始";isRunning = false;pasueBtn();}}//“開(kāi)始”與“暫停”點(diǎn)擊按鈕：//當(dāng)按鈕顯示為“開(kāi)始”，點(diǎn)擊之后，將按鈕轉(zhuǎn)為“暫停”按鈕，并觸發(fā)相應(yīng)條件；//當(dāng)按鈕顯示為“暫停”，點(diǎn)擊之后，將按鈕轉(zhuǎn)為“開(kāi)始”按鈕，并觸發(fā)相應(yīng)條件。jieDian("reset").onclick =function(){clearInterval(timer1)i = 0;isRunning = false;jieDian("btn1").innerHTML="開(kāi)始";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>

總結(jié)

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

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