Java Script 秒表计时器 ( 源码 + 分析 )
<body>????????????????????????????????????????????????????????????????????????
????????????????<div>00:00:00</div>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?創建? 標簽實現秒表初始樣子
????????????????<button>開始</button>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 創建? 按鈕1
????????????????<button>停止</button>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??創建? 按鈕2
????????????????<button>恢復</button>? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?創建? 按鈕3
<script>
????????var oDiv = document.querySelector('div');? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?獲取? 秒表標簽
????????var oBut1 = document.querySelectorAll('button')[0];? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 獲取? 按鈕1
????????var oBut2 = document.querySelectorAll('button')[1];? ? ? ? ? ? ? ? ? ? ? ? ? ? ??獲取? 按鈕2
????????var oBut3 = document.querySelectorAll('button')[2];? ? ? ? ? ? ? ? ? ? ? ? ? ? ??獲取? 按鈕3
????????var h = 0;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 初始化? ?小時? ?0
????????var m = 0;???????????????????????????????????????????????????????????????????????????????????????????????初始化? ?分鐘? ?0
????????var s = 0;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?初始化? ?秒? ?0
????????var res = true;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(秒表開關的初始化賦值,
??????????????????????????????????????????????????????????????????????????????????????????????為了讓秒表不會按開始后加快? 停不了)
oBut1.addEventListener('click', function () {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?添加事件1:? 點擊? ?"開始"
????????if(res === true){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?秒表開關為 "true" 進入程序
????????res = false;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?進入后開關 賦值 "false"?
????????}else{
????????return;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?第二次點擊時不會進入定時器累加
????????}
var time = setInterval(function () {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 設定? ?定時器? 1秒觸發一次??
????????s++;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 進入計時? ? 秒累加1
????????if (s === 60) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?秒? 累加到 60時
????????s = 0;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 秒? ?清零
????????m++;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 分鐘開始? 累加
????????}
????????if (m === 60) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 分鐘? 累加到 60時
????????m = 0;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 分鐘? ?清零
????????h++;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 小時開始? 累加
????????}
????????if (h === 60) {? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 小時? 累加到 60時? ? ? ? ? ? ? ??h = 0;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 小時? ?清零
?????????}
oDiv.innerHTML = `${h < 10 ? `0` + h : h}:${m < 10 ? `0` + m : m}:${s < 10 ? `0` + s : s}`;
}, 1000)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 這一步向DIV中寫入? ? 小時:分鐘:秒? 在這里 前導補零
oBut2.addEventListener('click',function(){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??添加事件2:? 點擊? ?"停止"
????????clearInterval(time);? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 清楚定時器? ?秒表停止
????????res=true;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?(開關 賦值 "true" 為了下一次可以繼續進入定時器? 連續計時)
????????})
oBut3.addEventListener('click',function(){? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??添加事件3:? 點擊? ?"恢復"
????????s=0;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 恢復默認? 秒? 清零
????????m=0;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?恢復默認? 分鐘? 清零
????????h=0;????????????????????????????????????????????????????????????????????????????????????????????????????????恢復默認? 小時? 清零
oDiv.innerHTML = `00:00:00`;? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 寫入? 清零
})
})
</script>
總結
以上是生活随笔為你收集整理的Java Script 秒表计时器 ( 源码 + 分析 )的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Hystrix服务降级的两种处理方式@H
- 下一篇： 手机验证码获取