一、功能介绍
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 领取原代码地址
持续关注我，不定时更新，谢谢浏览----
