javascript設(shè)計簡單的秒表計時器
更新時間：2020年09月05日 09:18:11 投稿：lijiao
這篇文章主要介紹了javascript設(shè)計簡單的秒表計時器，該秒表將包括兩個按鈕和一個用于顯示時間的文本框，當(dāng)單擊開始按鈕時開始計時，最小單位為0.01秒，此時再次單擊按鈕則停止計時，文本框顯示經(jīng)過的時間，需要的朋友可以參考下
本文實例講述了javascript設(shè)計簡單的秒表計時器的實現(xiàn)代碼，分享給大家供大家參考，具體如下：
運行效果截圖如下：
具體代碼如下：
<html>
<head>
<title> New Document </title>
</head>
<body>
<form action="somepage.asp">
<input type="text" value="0" name="txt1"/>
<input type="button" value="開始" name="btnStart"/>
<input type="button" value="重置" name="btnReset"/>
</form>
</body>
</html>
<script language="JavaScript" type="text/javascript">
<!--
//獲取表單中的表單域
var txt=document.forms[0].elements["txt1"];
var btnStart=document.forms[0].elements["btnStart"];
var btnReset=document.forms[0].elements["btnReset"]
//定義定時器的id
var id;
//每10毫秒該值增加1
var seed=0;
btnStart.onclick=function(){
//根據(jù)按鈕文本來判斷當(dāng)前操作
if(this.value=="開始"){
//使按鈕文本變?yōu)橥Ｖ?
this.value="停止";
//使重置按鈕不可用
btnReset.disabled=true;
//設(shè)置定時器，每0.01s跳一次
id=window.setInterval(tip,10);
}else{
//使按鈕文本變?yōu)殚_始
this.value="開始";
//使重置按鈕可用
btnReset.disabled=false;
//取消定時
window.clearInterval(id);
}
}
//重置按鈕
btnReset.onclick=function(){
seed=0;
}
//讓秒表跳一格
function tip(){
seed++;
txt.value=seed/100;
}
//-->
</script>
希望本文所述對大家學(xué)習(xí)javascript程序設(shè)計有所幫助。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js瀑布流布局的實現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-06-06
JS實現(xiàn)選擇TextArea內(nèi)文本的方法
這篇文章主要介紹了JS實現(xiàn)選擇TextArea內(nèi)文本的方法,涉及javascript針對頁面TextArea元素焦點設(shè)置及文本獲取的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
JavaScript設(shè)計模式之單例模式簡單實例教程
這篇文章主要介紹了JavaScript設(shè)計模式之單例模式,結(jié)合簡單實例形式分析了單例模式的概念、功能及javascript定義與使用單例模式相關(guān)操作技巧,需要的朋友可以參考下2018-07-07
這篇文章主要介紹了webpack v4 從dev到prd的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
JS實現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實例
這篇文章主要介紹了JS實現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-06-06
本篇文章分享的是 JS 當(dāng)中的邏輯運算符與、或，也就是 && 、 || ，沒錯，別看這簡簡單單的幾個運算符，雖然這是最基礎(chǔ)的知識，但其中隱藏的奧秘卻十分耐人尋味，接下來本文就為大家一一揭開這簡單的運算符背后的奇妙之處。2016-12-12
Javascript實現(xiàn)視頻文件播放功能(示例詳解)
這篇文章主要介紹了Javascript實現(xiàn)視頻文件播放功能,使用CSS完成相應(yīng)的布局樣式,利用JavaScript函數(shù)來監(jiān)聽進(jìn)度條,然后使用鼠標(biāo)點擊按鈕實現(xiàn)對視頻的播放,需要的朋友可以參考下2023-10-10
js 實現(xiàn) list轉(zhuǎn)換成tree的方法示例（數(shù)組到樹）
這篇文章主要介紹了js 實現(xiàn) list轉(zhuǎn)換成tree的方法示例（數(shù)組到樹），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
JavaScript手寫源碼之omit函數(shù)的實現(xiàn)
最近突然有個新的想法，想去看看前端的小庫來提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了，那就實現(xiàn)一個omit函數(shù)吧2023-02-02
使用Github?Actions發(fā)布npm包完整過程詳解
本文包含本地發(fā)布npm包發(fā)布流程,?和?github?action自動發(fā)布npm包流程,幫助你更好的發(fā)布自己或公司的npm包,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-09-09