计时器效果 代码仅供参考
生活随笔
收集整理的這篇文章主要介紹了
计时器效果 代码仅供参考
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
效果圖：
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title> </head> <style>.big{width: 400px;height: 100px;position: absolute;left: 50%;top: 150px;transform: translate(-60%);}.box{width: 100px;height: 100px;background-color: beige;float: left;margin-left: 30px;font-size: 20px;font-weight: 800;text-align: center;line-height: 100px;}button{margin-left: 20px;margin-top: 20px;} </style> <body><div class="big"><div class="box"></div><div class="box"></div><div class="box"></div><button id="but">開始</button></div></body> <script>var s = 0; //秒var m = 0; //分var h = 0; //時var box = document.getElementsByClassName('box'); //獲取div的dom元素var but = document.getElementById('but'); //獲取按鈕的dom元素function second(){if(s === 60){s=1m++}else{s++}if(m === 60){m = 1h++}s >=10 ? box[2].innerHTML = `${s}` : box[2].innerHTML = `0${s}`m >=10 ? box[1].innerHTML = `${m} :` : box[1].innerHTML = `0${m} :`h >=10 ? box[0].innerHTML = `${h} :` : box[0].innerHTML = `0${h} :`}var timer = null;but.addEventListener('click',function(){if(but.innerHTML === '開始'){but.innerHTML = '停止'timer = setInterval(second,1000)}else if(but.innerHTML === '停止'){but.innerHTML = '開始'clearInterval(timer)}})</script> </html>總結
以上是生活随笔為你收集整理的计时器效果 代码仅供参考的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 【tk制作一个登陆界面】
- 下一篇： FL Studio2023最新版编曲音乐