原生js實現(xiàn)秒表計時器功能
更新時間：2017年02月16日 10:34:03 作者：辰曉晨
這篇文章主要為大家詳細介紹了原生js實現(xiàn)秒表計時器功能，可以開始、暫停、清除，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了帶有開始、暫停、清除功能的js計時器，供大家參考，具體內(nèi)容如下
效果圖：
下面貼代碼：
<!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>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了小程序?qū)崿F(xiàn)長按保存圖片的方法，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
動態(tài)創(chuàng)建script在IE中緩存js文件時導(dǎo)致編碼的解決方法
這篇文章主要介紹了動態(tài)創(chuàng)建script在IE中緩存js文件時導(dǎo)致編碼的解決方法,需要的朋友可以參考下2014-05-05
ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法示例
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法,結(jié)合實例形式分析了Map的功能、使用方法及相關(guān)注意事項,需要的朋友可以參考下2017-03-03
文件上傳是 Web 開發(fā)肯定會碰到的問題,而文件夾上傳則更加難,下面這篇文章主要給大家介紹了關(guān)于如何基于js管理大文件上傳及斷點續(xù)傳的相關(guān)資料,需要的朋友可以參考下2021-08-08
javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法
這篇文章主要介紹了javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫的方法,通過自定義函數(shù)中的數(shù)組替換實現(xiàn)數(shù)字轉(zhuǎn)換整數(shù)金額大寫的功能,非常具有實用價值,需要的朋友可以參考下2015-01-01
javascript實現(xiàn)unicode和字符的互相轉(zhuǎn)換
javascript實現(xiàn)unicode和字符的互相轉(zhuǎn)換...2007-07-07
這篇文章主要介紹了js module，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
js獲取下拉列表框<option>中的value和text的值示例代碼
本篇文章主要是對js獲取下拉列表框<option>中的value和text的值示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-01-01
這篇文章主要介紹了在遇到數(shù)據(jù)或邏輯未成功更新問題時,如何通過刷新頁面、設(shè)置、清除緩存等方法進行解決,文中通過圖文將各種情況下清空緩存的方案介紹的非常詳細,需要的朋友可以參考下2025-02-02
Javascript必知必會(四)js類型轉(zhuǎn)換
這篇文章主要介紹了Javascript必知必會(四)js類型轉(zhuǎn)換 的相關(guān)資料,非常不錯具有參考借鑒價值，需要的朋友可以參考下2016-06-06