javascript設(shè)計(jì)簡(jiǎn)單的秒表計(jì)時(shí)器

更新時(shí)間：2020年09月05日 09:18:11 投稿：lijiao

這篇文章主要介紹了javascript設(shè)計(jì)簡(jiǎn)單的秒表計(jì)時(shí)器，該秒表將包括兩個(gè)按鈕和一個(gè)用于顯示時(shí)間的文本框，當(dāng)單擊開(kāi)始按鈕時(shí)開(kāi)始計(jì)時(shí)，最小單位為0.01秒，此時(shí)再次單擊按鈕則停止計(jì)時(shí)，文本框顯示經(jīng)過(guò)的時(shí)間，需要的朋友可以參考下

本文實(shí)例講述了javascript設(shè)計(jì)簡(jiǎn)單的秒表計(jì)時(shí)器的實(shí)現(xiàn)代碼，分享給大家供大家參考，具體如下：

運(yùn)行效果截圖如下：

具體代碼如下：

<html> 
<head> 
<title> New Document </title> 
</head> 
<body> 
 <form action="somepage.asp"> 
 <input type="text" value="0" name="txt1"/> 
 <input type="button" value="開(kāi)始" 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"] 
//定義定時(shí)器的id 
var id; 
//每10毫秒該值增加1 
var seed=0; 
btnStart.onclick=function(){ 
 //根據(jù)按鈕文本來(lái)判斷當(dāng)前操作 
 if(this.value=="開(kāi)始"){ 
 //使按鈕文本變?yōu)橥Ｖ?
 this.value="停止"; 
 //使重置按鈕不可用 
 btnReset.disabled=true; 
 //設(shè)置定時(shí)器，每0.01s跳一次 
 id=window.setInterval(tip,10); 
 }else{ 
 //使按鈕文本變?yōu)殚_(kāi)始 
 this.value="開(kāi)始"; 
 //使重置按鈕可用 
 btnReset.disabled=false; 
 //取消定時(shí) 
 window.clearInterval(id); 
 } 
} 
//重置按鈕 
btnReset.onclick=function(){ 
 seed=0; 
} 
//讓秒表跳一格 
function tip(){ 
 seed++; 
 txt.value=seed/100; 
} 
//--> 
</script>

希望本文所述對(duì)大家學(xué)習(xí)javascript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章:

js計(jì)時(shí)器

相關(guān)文章

用js編寫(xiě)留言板
這篇文章主要為大家詳細(xì)介紹了用js編寫(xiě)留言板，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-03-03
JavaScript使用indexOf獲得子字符串在字符串中位置的方法
這篇文章主要介紹了JavaScript使用indexOf獲得子字符串在字符串中位置的方法,涉及javascript中indexOf方法操作字符串的技巧,需要的朋友可以參考下
2015-04-04
JS 數(shù)組隨機(jī)洗牌的實(shí)例代碼
這篇文章主要介紹了js 數(shù)組隨機(jī)洗牌的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下
2018-09-09
js點(diǎn)擊文本框后才加載驗(yàn)證碼實(shí)例代碼
這篇文章是一段關(guān)于js點(diǎn)擊文本框后才加載驗(yàn)證碼實(shí)例代碼，而不是直接顯示驗(yàn)證碼，感興趣的小伙伴們可以參考一下
2015-10-10
前端冒泡排序算法詳解及實(shí)戰(zhàn)案例
這篇文章主要介紹了前端冒泡排序算法的相關(guān)資料,冒泡排序是一種簡(jiǎn)單的排序算法,通過(guò)比較相鄰元素并交換位置,實(shí)現(xiàn)元素排序,該算法的時(shí)間復(fù)雜度為O(n^2),空間復(fù)雜度為O(1),具有穩(wěn)定性,適用于小規(guī)模數(shù)據(jù)集和對(duì)穩(wěn)定性要求高的場(chǎng)景,需要的朋友可以參考下
2024-10-10
javascript入門(mén)之window對(duì)象【新手必看】
本文系統(tǒng)介紹了javascript的window對(duì)象以及一些控制函數(shù)的用法,僅供大家參考
2016-11-11
微信小程序?qū)崿F(xiàn)添加手機(jī)聯(lián)系人功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)添加手機(jī)聯(lián)系人功能,結(jié)合實(shí)例形式分析了微信小程序添加聯(lián)系人的具體步驟,包括布局與邏輯實(shí)現(xiàn)技巧,需要的朋友可以參考下
2017-11-11
js HTML5 Ajax實(shí)現(xiàn)文件上傳進(jìn)度條功能
這篇文章主要介紹了javascript實(shí)現(xiàn)文件上傳進(jìn)度條功能的相關(guān)資料啊，感興趣的朋友可以參考一下
2016-02-02
js中獲取一個(gè)月有多少天數(shù)的方法
這篇文章主要介紹了js中獲取一個(gè)月有多少天的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-06-06
js使瀏覽器窗口最大化實(shí)現(xiàn)代碼(適用于IE)
點(diǎn)擊最大化按鈕后，瀏覽器的內(nèi)容填充滿(mǎn)顯示器，瀏覽器窗口的邊框被擠出顯示器。而該js的最大化效果是瀏覽器的邊框在顯示器內(nèi)顯示，具體實(shí)現(xiàn)如下，感興趣的朋友可以參考下
2013-08-08