<menu id="u2y6m"></menu>
<tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 溫馨提示×

    js實現簡單的秒表效果的代碼分享

    發布時間:2020-04-02 10:54:18 來源:億速云 閱讀:171 作者:小新 欄目:web開發

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

    js實現簡單的秒表效果的代碼分享

    描述:

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

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

    效果:

    js實現簡單的秒表效果的代碼分享

    代碼如下:

    <!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實現簡單的秒表效果的代碼就分享到這里了,當然并不止以上和大家分析的辦法,不過小編可以保證其準確性是絕對沒問題的。希望以上內容可以對大家有一定的參考價值,可以學以致用。如果喜歡本篇文章,不妨把它分享出去讓更多的人看到。

    免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

    免費撥打  400 100 2938 免費撥打 400 100 2938
    24小時售后技術支持 24小時售后技術支持
    返回頂部 返回頂部
    <menu id="u2y6m"></menu>
    <tt id="u2y6m"><rt id="u2y6m"></rt></tt>
  • <input id="u2y6m"></input><tt id="u2y6m"><blockquote id="u2y6m"></blockquote></tt>
    <bdo id="u2y6m"><small id="u2y6m"></small></bdo>
  • <blockquote id="u2y6m"><optgroup id="u2y6m"></optgroup></blockquote>
  • 一本久道久久综合丁香五月_免费视频禁止18以下禁止观看_日本japanese熟睡人妻_成熟闷骚女邻居引诱2