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

编程问答

秒表倒计时

發(fā)布時(shí)間：2024/5/8 编程问答 43 豆豆

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

使用JavaScript實(shí)現(xiàn)秒表的倒計(jì)時(shí)。

我設(shè)置的是五分鐘倒計(jì)時(shí)，倒計(jì)時(shí)時(shí)間是可以自己隨意設(shè)置的。

效果圖

代碼演示

<!DOCTYPE html> <html><head><meta charset="utf-8" /><title></title></head><style>#timer{width: 400px;height: 120px;border: 1px solid red;text-align: center;background-color: cadetblue;}#one{width: 50px;height: 30px;margin-top: 10px;margin-left: 70px;float: left;font-size: 20px;border-radius: 10px;text-align: center;color: greenyellow;background-color: darkcyan;}.two{width: 50px;height: 30px;margin-top: 10px;margin-left: 15px;float: left;border-radius: 10px;font-size: 20px;text-align: center;color: greenyellow;background-color: darkcyan;}</style><body><div id="timer"><div id="one">h</div><div class="two">min</div><div class="two">s</div><div class="two">ms</div><span id="time" style="font-size: 3em">00:05:00:00</span></div></body><script type="text/javascript">var clock=document.getElementById("time");var start = clock.innerHTML;var finish = "00:00:00:00";var time = null;run();//定義時(shí)間函數(shù)，讓秒表每100ms變化一次function run() {time =setInterval("onTime()", 100);}function onTime(){if (start == finish){clearInterval(time);start="00:00:00:10";}//定義賦值var hms = new String(start).split(":");var ms = new Number(hms[3]);var s = new Number(hms[2]);var m = new Number(hms[1]);var h = new Number(hms[0]);ms -= 10;if (ms < 0){ms = 90;s -= 1;if (s < 0){s = 59;m -= 1;}if (m < 0){m = 59;h -= 1;}}//判斷如果是個(gè)位數(shù)前面加0var ms = ms < 10 ? ("0" + ms) : ms;var ss = s < 10 ? ("0" + s) : s;var sm = m < 10 ? ("0" + m) : m;var sh = h < 10 ? ("0" + h) : h;start = sh + ":" + sm + ":" + ss + ":" + ms;//在次賦值clock.innerHTML = start;}</script> </html>

總結(jié)

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

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