這篇文章主要為大家展示了如何使用JavaScript實現網頁秒表功能，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
效果圖展示，感覺不錯可以參考實例代碼。
具體代碼如下所示：
<!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?，F在需要的記錄效果是每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();
// 暫?？梢渣c
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+" ";
}
else{
ms.innerHTML="0"+thems+" ";
}
},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 </span>時</span>
<span><span id="minute">00 </span>分</span>
<span><span id="second">00 </span>秒</span>
<span><span id="ms">00 </span>毫秒</span>
<button id="start" οnclick="startTime()">開始計時</button>
</div>
</div>
</body>
</html>以上就是關于如何使用JavaScript實現網頁秒表功能的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
