本实例主要应用了js中的定时器（setInterval）、清除定时器（clearInterval）、快捷键（event.keyCode）来实现这一秒表的效果。可以通过键盘上的“S”键和“P”键控制秒表的开始和暂停，也可以用鼠标点击进行控制。秒表只支持秒、分，读者可以根据自己的需求进行扩充。
实现效果：
实现代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://www.daixiaorui.com/Public/js/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
//初始化timer1
var timer1 = "";
$("#begin").click(function(){
if(timer1!=""){
clearInterval(timer1);
}
timer1 = setInterval(tt,1000);
});
$("#pause").click(function(){
clearInterval(timer1);
});
//清除，秒表还原为00:00
$("#clear").click(function(){
clearInterval(timer1);
$("#s").text("00");
$("#mi").text("00");
});
function tt(){
//alert();
var sVal = parseInt($("#s").text());
var miVal = parseInt($("#mi").text());
if($("#s").text().substr(0,1)=="0"){
var sVal = parseInt($("#s").text().substr(1));
}
if($("#mi").text().substr(0,1)=="0"){
var miVal = parseInt($("#mi").text().substr(1));
}
if(sVal>58){
$("#s").html("00");
if(miVal>58){
clearInterval(timer1);
return;
}else if(miVal<9){ //小于10的时候，十位数用0填充
var mm = miVal+1;
$("#mi").html("0"+mm);
}else{
$("#mi").html(miVal+1);
}
}else if(sVal<9){
var vv = sVal+1;
$("#s").html("0"+vv);
}else{
$("#s").html(sVal+1);
}
}
//快捷键
$(document).keydown(function(event){
// 快捷键's'，开始计时
if(event.keyCode==83){
if(timer1!=""){
clearInterval(timer1);
}
timer1 = setInterval(tt,1000);
}
// 快捷键'p'，暂停计时
if(event.keyCode==80){
clearInterval(timer1);
}
});
});
</script>
<style type="text/css">
#main{ margin:100px auto; width:210px; height:auto; background:#f3f3f3; text-align:center;}
td{ font-size:66px; width:100px; height:98px; border:1px solid #ccc;}
table{ text-align:center;}
#mi{ color:#006;}
#s{ color:#603;}
sub{ font-size:16px; color:#999;}
input{ height:36px; width:64px; margin-top:8px; cursor:pointer;}
</style>
<title>秒表</title>
</head>
<body>
<div id="main">
<table><tr>
<td><span id="mi">00</span><sub>分</sub></td><td><span id="s">00</span><sub>秒</sub></td>
</tr></table>
<input type="button" value="开始(s)" id="begin" />
<input type="button" value="暂停(p)" id="pause" />
<input type="button" value="清除" id="clear" />
</div>
</body>
</html>
文章出自：https://www.daixiaorui.com/read/41.html 本站所有文章，除注明出处外皆为原创，转载请注明本文地址，版权所有。
想问下，为什么每隔一毫秒，计数一次不行啊，难道是每次都需要调用函数，反应速度慢？ timer1 = setInterval(tt,1); 我的function tt()也写好了的，可惜字数太多，不能粘贴源码
fsdf