用Javascript实现计时器主要用到的函数是setTimeout()和clearTimeout()。把超时时间设置为1000ms，也就是每秒进行一次更新，停止计时时用clearTimeout()进行取消。
先在.html文件中写上基本框架：
<html>
<head>
<script type="text/javascript" src="script.js"></script>
</head>
<body>
<h3 id="time">00:00</h3>
<div>
<a href="#" id="start">开始</a> <a href="#" id="stop">停止</a>
</div>
</body>
</html>
用一个全局变量c进行计数，每一秒钟执行一次c++;所以基本的想法就是用一个函数每隔1s递归一次并让c加1：
function timedCount(){
c=c+1;
t=setTimeout("timedCount()",1000);
}
这样的话很容易写出script.js文件：
window.onload = initAll;
var text;
var c=0;
function initAll(){
text = document.getElementById("time");
document.getElementById("start").onclick = timedCount;
document.getElementById("stop").onclick = stopCount;;
}
function timedCount(){
text.innerHTML=c;
c=c+1;
t=setTimeout("timedCount()",1000);
return false;
}
function stopCount(){
clearTimeout(t);
c=0;
return false;
}
但是这样的话显示的计时只是数秒，为了显示分钟，将代码改为：
//...
function timedCount(){
var m = getminute(c);
var s = getsecond(c,m);
text.innerHTML=m+":"+s;
c=c+1;
t=setTimeout("timedCount()",1000);
return false;
}
function stopCount(){
clearTimeout(t);
c=0;
return false;
}
function getminute(c){//得到分钟数
var m = parseInt(c/60);
m = checkTime(m);
return m;
}
function getsecond(c,m){//得到秒数
var s = c - m*60;
s =checkTime(s);
return s;
}
function checkTime(i){//如果结果为个位数，则在前面补零
if (i<10)
{
i="0" + i
}
return i
}
另外有一个问题，如果用户点过“开始”后，如果没有点“停止”而又点了一次“开始”，此时计数并不清零，而且计数速度也更快了，不再是每秒增加1。为了避免这一点，可以加一个标记判断是否已经点过“停止”，也可以用try{}catch(){}语句。此外还可以设置页面载入后只显示“开始”，而点过“开始”后则隐藏“开始”只显示“停止”。这样完整代码为：
window.onload = initAll;
var text;
var c=0;
function initAll(){
text = document.getElementById("time");
document.getElementById("stop").innerHTML = "" //隐藏“停止”
document.getElementById("start").onclick = timedCount;
document.getElementById("stop").onclick = stopCount;;
}
function timedCount(){
document.getElementById("start").innerHTML = "";
document.getElementById("stop").innerHTML = "停止" //隐藏“开始”
var m = getminute(c);
var s = getsecond(c,m);
text.innerHTML=m+":"+s;
c=c+1;
t=setTimeout("timedCount()",1000);
return false;
}
function stopCount(){
document.getElementById("start").innerHTML = "开始";
document.getElementById("stop").innerHTML = ""; //隐藏“停止”
clearTimeout(t);
c=0;
return false;
}
function getminute(c){
var m = parseInt(c/60);
m = checkTime(m);
return m;
}
function getsecond(c,m){
var s = c - m*60;
s =checkTime(s);
return s;
}
function checkTime(i){
if (i<10)
{
i="0" + i
}
return i
}