JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)簡(jiǎn)單計(jì)時(shí)器的具體代碼，供大家參考，具體內(nèi)容如下
<!DOCTYPE html><html lang='en'><head> <meta charset='UTF-8'> <title>計(jì)時(shí)器</title> <style>.bigDiv { margin: 50px auto; width: 200px; height: 200px; background-color: lightskyblue; border-radius: 10px;}#showNum { width: 200px; height: 20px; background-color: orange; text-align-all: center; border-radius: 5px;} </style></head><body><div class='bigDiv'> <h2 align='center'>計(jì)時(shí)器</h2> <div align='center'>0 </div> <br> <br> <div class='butDiv'>    <button type='button' id='start'>開(kāi)始</button> <button type='button' id='stop'>停止</button> <button type='button' id='reset'>復(fù)位</button>  </div></div><script> //定義顯示的時(shí)間 let int = null; /** * 開(kāi)始 單擊事件 */ document.getElementById('start').addEventListener(’click’, function () {if (int == null) { //設(shè)置定時(shí)器 //每隔參數(shù)二毫秒執(zhí)行一次參數(shù)一 int = setInterval(startNum, 1000);} }); /** * 停止 單擊事件 */ document.getElementById('stop').addEventListener(’click’, function () {//清除定時(shí)器，clearInterval(int);int = null; }); /** * 復(fù)位 單擊事件 */ let num = 0; document.getElementById('reset').addEventListener(’click’, function () {if (int == null) { num = 0; //將時(shí)間變成0 document.getElementById('showNum').innerHTML = num;} }); function startNum() {num++;//持續(xù)改變時(shí)間document.getElementById('showNum').innerHTML = num; }</script></body></html>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章：
1. 基于PHP做個(gè)圖片防盜鏈2. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)3. ASP.NET MVC使用Boostrap實(shí)現(xiàn)產(chǎn)品展示、查詢、排序、分頁(yè)4. XML在語(yǔ)音合成中的應(yīng)用5. jscript與vbscript 操作XML元素屬性的代碼6. asp.net core 認(rèn)證和授權(quán)實(shí)例詳解7. ASP.NET MVC把數(shù)據(jù)庫(kù)中枚舉項(xiàng)的數(shù)字轉(zhuǎn)換成文字8. 如何使用ASP.NET Core 配置文件9. .NET中實(shí)現(xiàn)對(duì)象數(shù)據(jù)映射示例詳解10. 基于javaweb+jsp實(shí)現(xiàn)企業(yè)車(chē)輛管理系統(tǒng)
網(wǎng)公網(wǎng)安備