一、功能介紹
1、該計時器有四個功能，開始，計時，暫停，重置
2、每隔一秒計時框字體會變色
3、代碼也比較簡單，下面先看效果
二、下面直接看代碼：
1、html代碼：
<body>
<div id="showTime"></div>
<div id="button">
<input type="button" value="開始" id="begin" />
<input type="button" value="計時" id="timer" />
<input type="button" value="暫停" id="pause" />
<input type="button" value="重置" id="reset" />
</div>
<div id="showTimer">
<span></span>
</div>
2、css樣式：
<style type="text/css">
#showTime {
width: 250px;
height: 50px;
border: 1px solid aqua;
font-size: 38px;
text-align: center;
margin: 0px auto;
line-height: 50px;
background-color: rgb(0, 0, 0);
color: white;
border-radius: 20px;
}
#button {
width: 265px;
height: 50px;
line-height: 40px;
text-align: center;
margin: 0px auto;
}
input {
margin: 2px;
font-size: 20px;
background-color: #7FFFD4;
border: 0px;
}
#showTimer {
width: 178px;
height: auto;
line-height: 20px;
text-align: center;
margin: 0px auto;
border: 1px solid aquamarine;
border-radius: 10px;
word-break: break-all;
word-wrap: break-word;
font-size: 18px;
}
</style>
3、下面就是重要的js代碼了
a、首先先設置時間的格式
<script type="text/javascript">
var hour = 0;//小時
var minute = 0;//分鐘
var second = 0;//秒
var millisecond = 0;//毫秒
var nowTime; //定義定時器對象(開始)
var i = 0;//當按下計時按鈕時i自增（名次）
//設置時間格式
function time() {
millisecond++;
if(millisecond >= 100) {
millisecond = 0;
second++;
}
if(second >= 60) {
second = 0;
minute++;
}
if(minute >= 60) {
minute = 0;
hour++;
}
if(hour >= 24) {
hour = 0;
}
$("#showTime").text((hour < 10 ? ("0" + hour) : hour) + ":" + (minute < 10 ? ("0" + minute) : minute) + ":" + (second < 10 ? ("0" + second) : second) + ":" + (millisecond < 10 ? ("0" + millisecond) : millisecond));
}
b、然後就有意思了，設置時間的字體顏色
//改變計時框時間的字體顏色
function color() {
setInterval(function() {
var cl1 = (Math.random() * 200) + 50; //隨機獲取rgb的第一個數
var cl2 = (Math.random() * 200) + 50; //隨機獲取rgb的第二個數
var cl3 = (Math.random() * 200) + 50; //隨機獲取rgb的第三個數
var showTime = document.querySelector("#showTime");//獲取時間框的選擇器（querySelector）
showTime.style.color = "rgb(" + cl1 + ',' + cl2 + ',' + cl3 + ")";//設置字體顏色的rgb
}, 1000);
}
c、設置每個按鈕的功能，然後調用函數，執行每個按鈕的功能
//開始按鈕 函數
function begin() {
//當按下開始按鈕時，如果nowTime未定義，則開始計時，否則彈窗提示
if(nowTime != undefined) {
alert("已經開啓！");
} else {
nowTime = setInterval(function() {
time();
}, 10);
}
}
//暫停按鈕 函數
function pause() {
window.clearInterval(nowTime); //清除計時器函數
nowTime = undefined;
}
//重置按鈕 函數
function reset() {
window.clearInterval(nowTime); //清除計時器方法
hour = minute = second = millisecond = 0;//時間都清0
$("#showTime").text("00:" + "00:" + "00:" + "00");//計時框時間都清0
$("span").text("");//記錄時間的框都清空
i = 0;//讓i=0
nowTime = undefined;//計時器函數值等於undefined
}
$(function() {
//設置計時器框的初始時間
$("#showTime").text("00:" + "00:" + "00:" + "00");
//開始按鈕點擊事件
$("#begin").on("click", function() {
color();
begin();
});
//暫停按鈕點擊事件
$("#pause").on("click", function() {
pause();
});
//重置按鈕點擊事件，當點擊重置按鈕時，所有數據全部清空
$("#reset").on("click", function() {
reset();
});
//給計時按鈕設置點擊事件
$("#timer").on("click", function() {
i++; //當計時按鈕點擊時，i自增
var timer = "第" + i + "名：" + $("#showTime").text(); //獲取當前計時框的數據，並加一個名次
$("span").text($("span").text() + timer); //把獲取的時間放到span標籤裏面，並累加
});
});
</script>
</body>
三、最後，一個簡單地計時器就完成了，快動手試試吧
掃描下面二維碼關注微信公衆號 回覆：js1030 領取原代碼地址
持續關注我，不定時更新，謝謝瀏覽----