快捷導(dǎo)航

原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能

更新時(shí)間：2017年02月16日 10:34:03 作者：辰曉晨

這篇文章主要為大家詳細(xì)介紹了原生js實(shí)現(xiàn)秒表計(jì)時(shí)器功能，可以開始、暫停、清除，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了帶有開始、暫停、清除功能的js計(jì)時(shí)器，供大家參考，具體內(nèi)容如下

效果圖：

下面貼代碼：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>計(jì)時(shí)器</title>
 <script>
  var hour,minute,second;//時(shí) 分 秒
  hour=minute=second=0;//初始化
  var millisecond=0;//毫秒
  var int;
  function Reset()//重置
  {
   window.clearInterval(int);
   millisecond=hour=minute=second=0;
   document.getElementById('timetext').value='00時(shí)00分00秒000毫秒';
  }
 
  function start()//開始
  {
   int=setInterval(timer,50);
  }
 
  function timer()//計(jì)時(shí)
  {
   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+'時(shí)'+minute+'分'+second+'秒'+millisecond+'毫秒';
 
  }
 
  function stop()//暫停
  {
   window.clearInterval(int);
  }
 </script>
</head>
<body>
<div style="text-align: center">
 <input type="text" id="timetext" value="00時(shí)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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

JavaScript網(wǎng)頁表單form中禁止自動(dòng)提交的兩種方式
本文是我本人在開發(fā)網(wǎng)頁時(shí),在表單中加入了button按鈕,本來是用于jQuery點(diǎn)擊相應(yīng)事件的按鈕,然后,但我點(diǎn)擊button時(shí),發(fā)現(xiàn)不是達(dá)到j(luò)Query指定效果,所以在本文中,我們將討論網(wǎng)頁表單（form）中提交的兩種方式,需要的朋友可以參考下
2024-06-06
一文剖析JavaScript中閉包的難點(diǎn)
這篇文章主要為大家詳細(xì)介紹了JavaScript中閉包的一些難點(diǎn)，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定幫助，需要的可以參考一下
2022-09-09
IE6下通過a標(biāo)簽點(diǎn)擊切換圖片的問題
IE6已經(jīng)讓人惡心很久了, Google旗下Youtube決定在3月13日起停止對(duì)IE6的支持. 但愿能加速IE6更換的速度.
2010-11-11
微信小程序搜索框組件代碼實(shí)例
這篇文章主要介紹了微信小程序搜索框組件代碼實(shí)例,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2019-09-09
JavaScript實(shí)現(xiàn)百度搜索框效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)百度搜索框效果
，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-05-05
JavaScript使用百度ECharts插件繪制餅圖操作示例
這篇文章主要介紹了JavaScript使用百度ECharts插件繪制餅圖操作,結(jié)合實(shí)例形式分析了JavaScript使用百度ECharts插件繪制餅圖的原理、步驟及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
2019-11-11
javascript中的異步調(diào)用機(jī)制
這篇文章主要介紹了javascript中的異步調(diào)用機(jī)制,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
2024-02-02
moment的一些常見用法總結(jié)大全
這篇文章主要給大家總結(jié)介紹了關(guān)于moment的一些常見用法,moment.js是一個(gè)輕量級(jí)的JavaScript時(shí)間庫(kù),對(duì)于日常開發(fā)中可能會(huì)存在獲取時(shí)間、設(shè)置時(shí)間、格式化時(shí)間、比較時(shí)間等,需要的朋友可以參考下
2023-09-09
javascript中innerText和innerHTML屬性用法實(shí)例分析
這篇文章主要介紹了javascript中innerText和innerHTML屬性用法,實(shí)例分析了javascript中innerText和innerHTML屬性的作用和相關(guān)的使用技巧,需要的朋友可以參考下
2015-05-05
js實(shí)現(xiàn)當(dāng)前輸入框高亮顯示的方法
這篇文章主要介紹了js實(shí)現(xiàn)當(dāng)前輸入框高亮顯示的方法,涉及javascript針對(duì)輸入框樣式動(dòng)態(tài)設(shè)置的技巧,非常美觀大方,簡(jiǎn)單實(shí)用,需要的朋友可以參考下
2015-08-08