快捷導(dǎo)航

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

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

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

本文實(shí)例為大家分享了帶有開(kāi)始、暫停、清除功能的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()//開(kāi)始
  {
   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()">開(kāi)始</button> <button type="button" onclick="stop()">暫停</button> <button type="button" onclick="Reset()">重置</button>
</div>
</body>
</html>

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

您可能感興趣的文章:

相關(guān)文章

小程序?qū)崿F(xiàn)長(zhǎng)按保存圖片的方法
這篇文章主要介紹了小程序?qū)崿F(xiàn)長(zhǎng)按保存圖片的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-12-12
動(dòng)態(tài)創(chuàng)建script在IE中緩存js文件時(shí)導(dǎo)致編碼的解決方法
這篇文章主要介紹了動(dòng)態(tài)創(chuàng)建script在IE中緩存js文件時(shí)導(dǎo)致編碼的解決方法,需要的朋友可以參考下
2014-05-05
ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法示例
這篇文章主要介紹了ES6新數(shù)據(jù)結(jié)構(gòu)Map功能與用法,結(jié)合實(shí)例形式分析了Map的功能、使用方法及相關(guān)注意事項(xiàng),需要的朋友可以參考下
2017-03-03
如何基于js管理大文件上傳及斷點(diǎn)續(xù)傳詳析
文件上傳是 Web 開(kāi)發(fā)肯定會(huì)碰到的問(wèn)題,而文件夾上傳則更加難,下面這篇文章主要給大家介紹了關(guān)于如何基于js管理大文件上傳及斷點(diǎn)續(xù)傳的相關(guān)資料,需要的朋友可以參考下
2021-08-08
javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫(xiě)的方法
這篇文章主要介紹了javascript將數(shù)字轉(zhuǎn)換整數(shù)金額大寫(xiě)的方法,通過(guò)自定義函數(shù)中的數(shù)組替換實(shí)現(xiàn)數(shù)字轉(zhuǎn)換整數(shù)金額大寫(xiě)的功能,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-01-01
javascript實(shí)現(xiàn)unicode和字符的互相轉(zhuǎn)換
javascript實(shí)現(xiàn)unicode和字符的互相轉(zhuǎn)換...
2007-07-07
js module大戰(zhàn)
這篇文章主要介紹了js module，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-04-04
js獲取下拉列表框<option>中的value和text的值示例代碼
本篇文章主要是對(duì)js獲取下拉列表框<option>中的value和text的值示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-01-01
前端強(qiáng)制刷新、清空緩存各種方法總結(jié)
這篇文章主要介紹了在遇到數(shù)據(jù)或邏輯未成功更新問(wèn)題時(shí),如何通過(guò)刷新頁(yè)面、設(shè)置、清除緩存等方法進(jìn)行解決,文中通過(guò)圖文將各種情況下清空緩存的方案介紹的非常詳細(xì),需要的朋友可以參考下
2025-02-02
Javascript必知必會(huì)(四)js類(lèi)型轉(zhuǎn)換
這篇文章主要介紹了Javascript必知必會(huì)(四)js類(lèi)型轉(zhuǎn)換的相關(guān)資料,非常不錯(cuò)具有參考借鑒價(jià)值，需要的朋友可以參考下
2016-06-06