使用JavaScript實現網頁秒錶功能（含開始、暫停、繼續、重置功能）

阿新 • • 發佈：2020-06-08

效果圖展示，感覺不錯可以參考例項程式碼。

在這裡插入圖片描述

具體程式碼如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width,initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <div>00:00:00:00</div>
 <button>開始</button>
 <button disabled>暫停</button>
 <button disabled>繼續</button>
 <button disabled>重置</button>

 <script>
//定義一個變數，根據定時器每秒執行一次，每次執行++自增操作，變數儲存的數值，就會每秒+1。現在需要的記錄效果是每0.01秒，也就是10毫秒執行一次。根據累計的數值執行進位。如果毫秒達到100就是1秒，如果秒達到60就是1分鐘，如果分鐘達到60就是1小時

  var ms = 0; // 毫秒
  var s = 0; // 秒
  var m = 0; // 分鐘
  var h = 0; // 小時

  // 單獨定義儲存時、分、秒、毫秒的字串的變數來儲存累加時間的執行結果，因為如果直接在ms、s、m、h變數上進行拼接操作，會影響++操作的執行  
  var msStr = '';
  var sStr = '';
  var mStr = '';
  var hStr = '';

  // 因為定時器是定義在函式內部，必須定義一個全域性變數來儲存定時器，在函式外部可以呼叫終止定時器
  var time = 0;

  // 獲取div標籤物件
  var oDiv = document.querySelector('div');

  // 獲取按鈕的標籤物件
  var oStart = document.querySelectorAll('button')[0]; // 開始
  var oPause = document.querySelectorAll('button')[1]; // 暫停
  var oCont = document.querySelectorAll('button')[2]; //繼續
  var oReset = document.querySelectorAll('button')[3]; // 重置

  // 給四個按鈕新增點選事件效果
  
  // 開始按鈕
  oStart.onclick = function(){
   // 點選開始按鈕執行函式，執行秒錶計時
   setTimeStr();
   // 可以點暫停
   oPause.disabled = false;
   // 其他標籤都不能點
   oStart.disabled = true;
   oCont.disabled = true;
   oReset.disabled = true;
  }

  // 暫停按鈕
  oPause.onclick = function(){
   // 點選暫停按鈕,清除定時器,終止秒錶執行
   clearInterval(time);
   // 暫停本身和開始不能點
   oPause.disabled = true;
   oStart.disabled = true;
   // 繼續和重置能點了
   oCont.disabled = false;
   oReset.disabled = false;
  }

  // 繼續按鈕
  oCont.onclick = function(){
   // 點選繼續按鈕，繼續執行定時器
   setTimeStr();
   // 暫停可以點
   oPause.disabled = false;
   // 其他都不能點
   oCont.disabled = true;
   oReset.disabled = true;
   oStart.disabled = true;
  }


  // 重置按鈕
  oReset.onclick = function(){
   // 點選重置按鈕,將所有的資料都恢復到0的狀態
   // 所有變數儲存的資料都是0,div中的內容也恢復到0   
   // 定義所有儲存時間的變數儲存的數值為0 
   ms = 0; // 毫秒
   s = 0; // 秒
   m = 0; // 分鐘
   h = 0; // 小時
   // 將div中的內容,設定為初始狀態的00:00:00:00內容
   oDiv.innerHTML = '00:00:00:00';
   // 開始可以點
   oStart.disabled = false;
   // 其他都不能點
   oPause.disabled = true;
   oCont.disabled = true;
   oReset.disabled = true;
  }

  // 每次點選開始按鈕或者繼續按鈕都會呼叫執行函式，都會生成一個新的定時器。time中儲存的是當前這個新的定時器，是整個程式中定時器的序號
  // 例如點選開始按鈕10次會生成10個定時，time中儲存最後一個定時器的序號10
  // 當點選暫停按鈕時，清除的是time中儲存的序號是10的這一個定時器，之前 1-9定時器仍然會執行  
  // 解決方法：點選開始按鈕之後，在點選暫停按鈕之前，禁止再次點選開始按鈕。也就是在清除原有定時器之前，不允許生成新的定時器

  // 定義函式，這個函式的作用就是記錄執行的時間，有小時、分鐘、秒、毫秒 4個部分。將記錄的時間寫入到div中，div中起始時預設都是0
  function setTimeStr(){  
   // 賦值操作,將定時器,儲存在全域性作用域變數中
   // 此處只是賦值操作
   time = setInterval(function(){
    ms++;
    // 毫秒是10毫秒一增加
    // ms儲存的數值如果達到100，就是1秒種了
    // 給秒單位進位 s++ 
    // ms本身需要重新開始記錄數值
    // 0:0:0:99 ---> 0:0:1:00
    if(ms == 100){
     s++;  // 秒進位
     ms = 0; // ms本身清零,重新記錄
    }

    if(s == 60){
     m++;  // 分鐘進位 
     s = 0;  // s秒 清零
    }

    if(m == 60){
     h++;  // 小時進位 
     m = 0;  // m分鐘 清零
    }

    // 小時記錄可以每24小時清零一次，或者100小時清零一次，都可以
    if(h == 100){
     h = 0;
    }

    // 如果記錄的時間小於0，要做補零操作
    if(ms < 10){
     msStr = '0' + ms;
    }else{
     msStr = ms;
    }

    if(s < 10){
     sStr = '0' + s;
    }else{
     sStr = s;
    }

    if(m < 10){
     mStr = '0' + m;
    }else{
     mStr = m;
    }

    if(h < 10){
     hStr = '0' + h;
    }else{
     hStr = h;
    }
    // 每次執行返回一個記錄時間的字串，將這個字串寫入到div中
    oDiv.innerHTML = `${hStr}:${mStr}:${sStr}:${msStr}`;
   },10);  
   console.log(time);
  } 
 </script>
</body>
</html>

ps：下面看下JavaScript實現計時器，一個按鈕實現開始和停止的功能

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var intervalId;
var i = 0;
var count=0;
function startTime(){
var hour = document.getElementById("hour");
var minute = document.getElementById("minute");
var second = document.getElementById("second");
var ms = document.getElementById("ms");
var buttonEle = document.getElementById("start");


if(i%2==0){
buttonEle.innerHTML="暫停計時";
intervalId = setInterval(function(){
count += 1;
var thehour=parseInt(count/360000);
var theminute=parseInt(count/6000%60);
var thesecond=parseInt(count/100%60);
var thems = parseInt(count%100);

if(thehour>=10){
hour.innerHTML=thehour+" ";
}
else{
hour.innerHTML="0"+thehour+" ";
}

if(theminute>=10){
minute.innerHTML=theminute+" ";
}
else{
minute.innerHTML="0"+theminute+" ";
}

if(thesecond>=10){
second.innerHTML=thesecond+" ";
}
else{
second.innerHTML="0"+thesecond+" ";
}
if(thems>=10){
ms.innerHTML=thems+"&nbsp;";
}
else{
ms.innerHTML="0"+thems+"&nbsp;";
}
},10)
}
else{
buttonEle.innerHTML="開始計時";
clearInterval(intervalId);
}
i++;
}
</script>
<style type="text/css">
body,html{
background: violet;
/*position: relative;*/
}
#firstDiv{
height: 50%;
width:50% ;
position:absolute;
margin-left: 350px;
margin-top:150px;
background: #ffcccc;
}
#twoDiv{
height: 200px;
width:100%;
position: absolute;
margin-top: 130px;
margin-left: 130px;;
}
span{
font-size: 30px;
}
button{
font-size: 20px;
}
</style>
</head>
<body>
<div id="firstDiv">
<div id="twoDiv">
<span><span id="hour">00&nbsp;</span>時</span>
<span><span id="minute">00&nbsp;</span>分</span>
<span><span id="second">00&nbsp;</span>秒</span>
<span><span id="ms">00&nbsp;</span>毫秒</span>

<button id="start" οnclick="startTime()">開始計時</button>
</div>
</div>
</body>
</html>

總結

到此這篇關於使用JavaScript實現網頁秒錶功能（含開始、暫停、繼續、重置功能）的文章就介紹到這了,更多相關js 網頁秒錶內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！