原生js實現(xiàn)秒表計時器功能
更新時間：2017年02月16日 10:34:03 作者：辰曉晨
這篇文章主要為大家詳細介紹了原生js實現(xiàn)秒表計時器功能，可以開始、暫停、清除，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了帶有開始、暫停、清除功能的js計時器，供大家參考，具體內容如下
效果圖：
下面貼代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>計時器</title>
<script>
var hour,minute,second;//時 分 秒
hour=minute=second=0;//初始化
var millisecond=0;//毫秒
var int;
function Reset()//重置
{
window.clearInterval(int);
millisecond=hour=minute=second=0;
document.getElementById('timetext').value='00時00分00秒000毫秒';
}
function start()//開始
{
int=setInterval(timer,50);
}
function timer()//計時
{
millisecond=millisecond+50;
if(millisecond>=1000)
{
millisecond=0;
second=second+1;
}
if(second>=60)
{
second=0;
minute=minute+1;
}
if(minute>=60)
{
minute=0;
hour=hour+1;
}
document.getElementById('timetext').value=hour+'時'+minute+'分'+second+'秒'+millisecond+'毫秒';
}
function stop()//暫停
{
window.clearInterval(int);
}
</script>
</head>
<body>
<div style="text-align: center">
<input type="text" id="timetext" value="00時00分00秒" readonly><br>
<button type="button" onclick="start()">開始</button> <button type="button" onclick="stop()">暫停</button> <button type="button" onclick="Reset()">重置</button>
</div>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
JavaScript網(wǎng)頁表單form中禁止自動提交的兩種方式
本文是我本人在開發(fā)網(wǎng)頁時,在表單中加入了button按鈕,本來是用于jQuery點擊相應事件的按鈕,然后,但我點擊button時,發(fā)現(xiàn)不是達到jQuery指定效果,所以在本文中,我們將討論網(wǎng)頁表單（form）中提交的兩種方式,需要的朋友可以參考下2024-06-06
這篇文章主要為大家詳細介紹了JavaScript中閉包的一些難點，文中的示例代碼講解詳細，對我們學習JavaScript有一定幫助，需要的可以參考一下2022-09-09
IE6已經(jīng)讓人惡心很久了, Google旗下Youtube決定在3月13日起停止對IE6的支持. 但愿能加速IE6更換的速度.2010-11-11
這篇文章主要介紹了微信小程序 搜索框組件代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2019-09-09
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)百度搜索框效果2018-05-05
，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
JavaScript使用百度ECharts插件繪制餅圖操作示例
這篇文章主要介紹了JavaScript使用百度ECharts插件繪制餅圖操作,結合實例形式分析了JavaScript使用百度ECharts插件繪制餅圖的原理、步驟及相關操作注意事項,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了javascript中的異步調用機制,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-02-02
這篇文章主要給大家總結介紹了關于moment的一些常見用法,moment.js是一個輕量級的JavaScript時間庫,對于日常開發(fā)中可能會存在獲取時間、設置時間、格式化時間、比較時間等,需要的朋友可以參考下2023-09-09
javascript中innerText和innerHTML屬性用法實例分析
這篇文章主要介紹了javascript中innerText和innerHTML屬性用法,實例分析了javascript中innerText和innerHTML屬性的作用和相關的使用技巧,需要的朋友可以參考下2015-05-05
這篇文章主要介紹了js實現(xiàn)當前輸入框高亮顯示的方法,涉及javascript針對輸入框樣式動態(tài)設置的技巧,非常美觀大方,簡單實用,需要的朋友可以參考下2015-08-08