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

本文實(shí)例講述了javascript設(shè)計(jì)簡單的秒表計(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="開始" 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ù)按鈕文本來判斷當(dāng)前操作 
 if(this.value=="開始"){ 
 //使按鈕文本變?yōu)橥Ｖ?
 this.value="停止"; 
 //使重置按鈕不可用 
 btnReset.disabled=true; 
 //設(shè)置定時(shí)器，每0.01s跳一次 
 id=window.setInterval(tip,10); 
 }else{ 
 //使按鈕文本變?yōu)殚_始 
 this.value="開始"; 
 //使重置按鈕可用 
 btnReset.disabled=false; 
 //取消定時(shí) 
 window.clearInterval(id); 
 } 
} 
//重置按鈕 
btnReset.onclick=function(){ 
 seed=0; 
} 
//讓秒表跳一格 
function tip(){ 
 seed++; 
 txt.value=seed/100; 
} 
//--> 
</script>

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

您可能感興趣的文章:

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

相關(guān)文章

js瀑布流布局的實(shí)現(xiàn)
這篇文章主要為大家詳細(xì)介紹了js瀑布流布局的實(shí)現(xiàn)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2020-06-06
JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法
這篇文章主要介紹了JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法,涉及javascript針對頁面TextArea元素焦點(diǎn)設(shè)置及文本獲取的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下
2015-08-08
JavaScript設(shè)計(jì)模式之單例模式簡單實(shí)例教程
這篇文章主要介紹了JavaScript設(shè)計(jì)模式之單例模式,結(jié)合簡單實(shí)例形式分析了單例模式的概念、功能及javascript定義與使用單例模式相關(guān)操作技巧,需要的朋友可以參考下
2018-07-07
webpack v4 從dev到prd的方法
這篇文章主要介紹了webpack v4 從dev到prd的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2018-04-04
JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例
這篇文章主要介紹了JS實(shí)現(xiàn)網(wǎng)站樓層導(dǎo)航效果代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-06-06
深入了解JavaScript的邏輯運(yùn)算符（與、或）
本篇文章分享的是 JS 當(dāng)中的邏輯運(yùn)算符與、或，也就是 && 、 || ，沒錯(cuò)，別看這簡簡單單的幾個(gè)運(yùn)算符，雖然這是最基礎(chǔ)的知識，但其中隱藏的奧秘卻十分耐人尋味，接下來本文就為大家一一揭開這簡單的運(yùn)算符背后的奇妙之處。
2016-12-12
Javascript實(shí)現(xiàn)視頻文件播放功能(示例詳解)
這篇文章主要介紹了Javascript實(shí)現(xiàn)視頻文件播放功能,使用CSS完成相應(yīng)的布局樣式,利用JavaScript函數(shù)來監(jiān)聽進(jìn)度條,然后使用鼠標(biāo)點(diǎn)擊按鈕實(shí)現(xiàn)對視頻的播放,需要的朋友可以參考下
2023-10-10
js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例（數(shù)組到樹）
這篇文章主要介紹了js 實(shí)現(xiàn) list轉(zhuǎn)換成tree的方法示例（數(shù)組到樹），文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
JavaScript手寫源碼之omit函數(shù)的實(shí)現(xiàn)
最近突然有個(gè)新的想法，想去看看前端的小庫來提升自己的編碼能力。但是又不知道怎么去證明自己是否真的看懂了，那就實(shí)現(xiàn)一個(gè)omit函數(shù)吧
2023-02-02
使用Github?Actions發(fā)布npm包完整過程詳解
本文包含本地發(fā)布npm包發(fā)布流程,?和?github?action自動(dòng)發(fā)布npm包流程,幫助你更好的發(fā)布自己或公司的npm包,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪
2023-09-09