js實現簡單的秒表-創新互聯

本文實例為大家分享了js實現簡單的秒表具體代碼，供大家參考，具體內容如下

我們提供的服務有：網站建設、成都做網站、微信公眾號開發、網站優化、網站認證、清澗ssl等。為上1000家企事業單位解決了網站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的清澗網站制作公司

描述：

實現一個簡單的秒表，點擊啟動按鈕時開始計時，隨后啟動按鈕變為暫停，

點擊暫停暫停計時，點擊復位回到最初始狀態。

效果：

代碼：

<!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">復位</button>
 </div>
<script>
 //——————
 var time,showTime,startBn,restBn,pauseDate;
 //布爾開關
 var bool=false;
 //暫停的累計時間
 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);//復位按鈕
 setInterval(animation,16);
 }
 
 //轉化時間函數
 function animation() {
 if(!bool) return;
 //前時間減去上次開啟時間減去暫停累計時間
 var times=new Date().getTime()-time-pauseTime;
 var minutes=Math.floor(times/60000);//毫秒轉化為分鐘
 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);
 }
 
 //點擊時的事件
 function clickHandler(e) {
 e= e || window.event;
 if(this===startBn){
  bool=!bool;
  if(bool){
  this.innerHTML="暫停";
  //如果我們上一次暫停時間是空，表示沒有暫停過，因此，直接返回0
  //如果上次的暫停時間是有值得，用當前毫秒數減去上次的毫秒數，這樣就會得到暫停時間
  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>

標題名稱：js實現簡單的秒表-創新互聯
標題來源：http://vcdvsql.cn/article6/didgog.html

成都網站建設公司_創新互聯，為您提供ChatGPT、定制開發、建站公司、網站維護、定制網站、網站收錄

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

猜你還喜歡下面的內容

bl双性强迫侵犯h_国产在线观看人成激情视频_蜜芽188_被诱拐的少孩全彩啪啪漫画

js實現簡單的秒表-創新互聯