JavaScript實(shí)現(xiàn)簡單計(jì)時(shí)器
更新時(shí)間：2021年06月22日 09:13:44 作者：妄癡夢(mèng)中
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡單計(jì)時(shí)器，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xià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 id="showNum" align="center">
0
</div>
<br>
<br>
<div class="butDiv">    
<button type="button" id="start">開始</button>
 
<button type="button" id="stop">停止</button>
 
<button type="button" id="reset">復(fù)位</button>
 
</div>
</div>
<script>
//定義顯示的時(shí)間
let int = null;
/**
* 開始 單擊事件
*/
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>
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳談for循環(huán)里面的break和continue語句
下面小編就為大家?guī)硪黄斦刦or循環(huán)里面的break和continue語句。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了JS可以控制樣式的名稱寫法，有需要的朋友可以參考一下2014-01-01
本文主要介紹了JS中常用的四個(gè)基礎(chǔ)算法，主要介紹了冒泡排序，選擇排序，插入排序和快速排序這四種算法,需要的朋友可以參考下2023-05-05
引用了jQuery，節(jié)省了很多鼠標(biāo)點(diǎn)擊上的判斷。界面顯然都是照搬Windows的掃雷啦，詳細(xì)的內(nèi)容注釋里都有，感興趣的朋友參考下吧2016-02-02
容易被忽略的JS腳本特性，學(xué)習(xí)js的朋友可以參考下。2011-09-09
layui動(dòng)態(tài)表頭的實(shí)現(xiàn)代碼
這篇文章主要介紹了layui動(dòng)態(tài)表頭的實(shí)現(xiàn)代碼，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript實(shí)現(xiàn)基于十進(jìn)制的四舍五入實(shí)例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)基于十進(jìn)制的四舍五入的方法,實(shí)例分析了javascript針對(duì)數(shù)值判斷與相關(guān)運(yùn)算技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07
JS實(shí)現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的代碼詳解
很多前端的同學(xué)對(duì)數(shù)據(jù)結(jié)構(gòu)和算法這塊沒有太多的概念,很多l(xiāng)eetcode的題目看不懂,有時(shí)候可能看了題解也不知道是什么意思,這篇文章咱們來簡單的談一談鏈表,文中給大家介紹了JS實(shí)現(xiàn)鏈表數(shù)據(jù)結(jié)構(gòu)的示例代碼,需要的朋友可以參考下2024-01-01
Bootstrap DateTime Picker日歷控件簡單應(yīng)用
這篇文章主要介紹了Bootstrap DateTime Picker日歷控件的簡單應(yīng)用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-03-03
JavaScript獲取URL中參數(shù)querystring的方法詳解
這篇文章先給大家介紹了JavaScript獲取URL中參數(shù)querystring的方法，而后有詳解介紹了Location對(duì)象的屬性和，Location對(duì)象的方法，對(duì)大家的理解很有幫助，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-10-10