溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天小編給大家分享的是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進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
