js實(shí)現(xiàn)簡單的秒表效果的代碼分享-創(chuàng)新互聯(lián)

今天小編給大家分享的是js實(shí)現(xiàn)簡單的秒表效果的代碼，很多人都不太了解，今天小編為了讓大家更加容易的實(shí)現(xiàn)簡單的秒表效果，所以給大家總結(jié)了以下內(nèi)容，一起往下看吧。一定會有所收獲的哦。

創(chuàng)新互聯(lián)，為您提供網(wǎng)站建設(shè)公司、網(wǎng)站制作、網(wǎng)站營銷推廣、網(wǎng)站開發(fā)設(shè)計(jì)，對服務(wù)生料攪拌車等多個(gè)行業(yè)擁有豐富的網(wǎng)站建設(shè)及推廣經(jīng)驗(yàn)。創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司成立于2013年,提供專業(yè)網(wǎng)站制作報(bào)價(jià)服務(wù),我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞心悅目的作品。與客戶共同發(fā)展進(jìn)步，是我們永遠(yuǎn)的責(zé)任！

js實(shí)現(xiàn)簡單的秒表效果的代碼分享

描述：

實(shí)現(xiàn)一個(gè)簡單的秒表，點(diǎn)擊啟動按鈕時(shí)開始計(jì)時(shí)，隨后啟動按鈕變?yōu)闀和＃?/p>

點(diǎn)擊暫停暫停計(jì)時(shí)，點(diǎn)擊復(fù)位回到最初始狀態(tài)。

效果：

js實(shí)現(xiàn)簡單的秒表效果的代碼分享

代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <style>
 #showTime
 {
  width: 300px;
  height: 60px;
  font-size: 60px;
  line-height: 60px;
 }
 </style>
</head>
<body>
 <div>
 <div id="showTime">00:00:00</div>
 <button id="startBn">啟動</button>
 <button id="restBn">復(fù)位</button>
 </div>
<script>
 //——————
 var time,showTime,startBn,restBn,pauseDate;
 //布爾開關(guān)
 var bool=false;
 //暫停的累計(jì)時(shí)間
 var pauseTime=0;
  
 init();
 function init() {
 showTime=document.getElementById("showTime");
 startBn=document.getElementById("startBn");
 restBn=document.getElementById("restBn");
 startBn.addEventListener("click",clickHandler);//開始按鈕 ~ 暫停按鈕
 restBn.addEventListener("click",clickHandler);//復(fù)位按鈕
 setInterval(animation,16);
 }
  
 //轉(zhuǎn)化時(shí)間函數(shù)
 function animation() {
 if(!bool) return;
 //前時(shí)間減去上次開啟時(shí)間減去暫停累計(jì)時(shí)間
 var times=new Date().getTime()-time-pauseTime;
 var minutes=Math.floor(times/60000);//毫秒轉(zhuǎn)化為分鐘
 var seconds=Math.floor((times-minutes*60000)/1000);//已知分鐘 
 將time減去分鐘 除去1000得出 秒
 var ms=Math.floor((times-minutes*60000-seconds*1000)/10);//
 showTime.innerHTML=
  (minutes<10 ? "0" +minutes : minutes)+":"
  +(seconds<10 ? "0"+seconds :seconds)+":"
 +(ms<10 ? "0"+ms : ms);
 }
  
 //點(diǎn)擊時(shí)的事件
 function clickHandler(e) {
 e= e || window.event;
 if(this===startBn){
  bool=!bool;
  if(bool){
  this.innerHTML="暫停";
  //如果我們上一次暫停時(shí)間是空，表示沒有暫停過，因此，直接返回0
  //如果上次的暫停時(shí)間是有值得，用當(dāng)前毫秒數(shù)減去上次的毫秒數(shù)，這樣就會得到暫停時(shí)間
  pauseTime+=(!pauseDate ? 0 : new Date().getTime()-pauseDate);
  if(time) return;
  time=new Date().getTime();
  return;//是為bool判斷跳出
  }
  
  this.innerHTML="啟動";
  pauseDate=new Date().getTime();
  return;//是為this是否等于startBn判斷跳出
 }
 startBn.innerHTML="啟動";
 pauseTime=0;
 pauseDate=null;
 bool=false;
 time=0;
 showTime.innerHTML="00:00:00";
 }
  
</script>
</body>
</html>

關(guān)于js實(shí)現(xiàn)簡單的秒表效果的代碼就分享到這里了，當(dāng)然并不止以上和大家分析的辦法，不過小編可以保證其準(zhǔn)確性是絕對沒問題的。希望以上內(nèi)容可以對大家有一定的參考價(jià)值，可以學(xué)以致用。如果喜歡本篇文章，不妨把它分享出去讓更多的人看到。

網(wǎng)站標(biāo)題：js實(shí)現(xiàn)簡單的秒表效果的代碼分享-創(chuàng)新互聯(lián)
文章URL：http://muchs.cn/article44/egehe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站制作、響應(yīng)式網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站營銷、企業(yè)網(wǎng)站制作、微信公眾號

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容