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. 使用css實(shí)現(xiàn)全兼容tooltip提示框2. CSS代碼檢查工具stylelint的使用方法詳解3. CSS3實(shí)例分享之多重背景的實(shí)現(xiàn)(Multiple backgrounds)4. Vue3使用JSX的方法實(shí)例(筆記自用)5. JavaScript數(shù)據(jù)類(lèi)型對(duì)函數(shù)式編程的影響示例解析6. 詳解CSS偽元素的妙用單標(biāo)簽之美7. Vue3獲取DOM節(jié)點(diǎn)的3種方式實(shí)例8. 利用CSS3新特性創(chuàng)建透明邊框三角9. vue實(shí)現(xiàn)將自己網(wǎng)站(h5鏈接)分享到微信中形成小卡片的超詳細(xì)教程10. 不要在HTML中濫用div
網(wǎng)公網(wǎng)安備