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