今天学到了JavaScript的计时对象模型，于是心血来潮，做了一个简单的计时器。完整代码如下：
<!-- 一个简易的计时器，没有经过美化处理 -->
<html>
<head>
<meta http-equiv="content-type" content="txt/html; charset=utf-8"/>
</head>
<script>
// 定义三个时间变量
var hour=0;
var minute=0;
var second=0;
// 定义两个参数变量，进行轮流计时。
var countTime1;
var countTime2;
// 定义一个函数切换变量，用于进行参数切换。
var judgement = true;
// 重置函数
function setZero(){
hour = 0;
minute = 0;
second = 0;
document.getElementById("print").innerHTML = hour+":"+minute+":"+second;
}
//计时函数
function countTime(){
second += 1;
if(second==60){
second = 0;
minute += 1;
if(minute==60){
hour += 1;
}
}
// 进行显示
document.getElementById("print").innerHTML=hour+":"+minute+":"+second;
}
// 开始计时
function beginCount(){
if(judgement==true){
countTime1 = setInterval(countTime,1000);
}
else if(judgement == false){
countTime2 = setInterval(countTime,1000);
}
}
// 暂停计时
function stopCount(){
if(judgement==true){
var stop1 = clearInterval(countTime1);
judgement = false;
}
else if(judgement==false){
var stop2 = clearInterval(countTime2);
judgement = true;
}
}
</script>
<body>
<!-- 用于显示时间 -->
<div id="print"></div>
<button onclick="beginCount()">开始计时</button>
<button onclick="stopCount()">暂停计时</button>
<button onclick="setZero()">重新开始计时</button>
</body>
</html>
最终效果如下：
对于上面定义两个变量作为计时变量以及定义一个参数切换，讲一讲其中的过程。
// 定义两个参数变量，进行轮流计时。
var countTime1;
var countTime2;
// 定义一个函数切换变量，用于进行参数切换。
var judgement = true;
一开始写的时候，代码其实是下面这样的：
<!-- 简易计时器 -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
// 定义三个时间变量
var hour=0;
var minute=0;
var second=0;
// 定义一个计时变量
var countTime;
// 重置函数
function setZero(){
hour = 0;
minute = 0;
second = 0;
document.getElementById("print").innerHTML = hour+":"+minute+":"+second;
}
//计时函数
function countTime(){
second += 1;
if(second==60){
second = 0;
minute += 1;
if(minute==60){
hour += 1;
}
}
// 进行显示
document.getElementById("print").innerHTML=hour+":"+minute+":"+second;
}
// 开始计时
function beginCount(){
countTime = setInterval(countTime,1000);
}
// 暂停计时
function stopCount(){
var stopTime = clearInterval(countTime);
}
</script></head>
<body>
<!-- 用于显示时间 -->
<div id="print"></div>
<button onclick="beginCount()">开始计时</button>
<button onclick="stopCount()">暂停计时</button>
<button onclick="beginCount()">继续计时</button>
<button onclick="setZero()">重新开始计时</button>
</body></html>
和后来写的代码的区别在于这里只用了一个控制计时的变量。
最终的结果是这样的：
但这样的写法有个问题：暂停计时之后就无法继续计时。
原因在于clearInterval结束了countTime变量的重复执行。
var stopTime = clearInterval(countTime);
后来查找了相关资料，有人说可以重新添加新的变量重复执行这个函数。于是我对最初的代码进行了修改，添加了一个新的变量进行测试。
<script>
// 定义三个时间变量
var hour=0;
var minute=0;
var second=0;
// 多定义一个时间变量
var countTime1;
var countTime2;
// 重置函数
function setZero(){
hour = 0;
minute = 0;
second = 0;
document.getElementById("print").innerHTML = hour+":"+minute+":"+second;
}
//计时函数
function countTime(){
second += 1;
if(second==60){
second = 0;
minute += 1;
if(minute==60){
hour += 1;
}
}
// 进行显示
document.getElementById("print").innerHTML=hour+":"+minute+":"+second;
}
// 开始计时
function beginCount(){
countTime1 = setInterval(countTime,1000);
}
// 暂停计时1
function stopCount1(){
var stopTime = clearInterval(countTime1);
}
// 开始计时2
function beginCount2(){
countTime2 = setInterval(countTime,1000);
}
// 暂停计时2
function stopCount2(){
var stopTime2 = clearInterval(countTime2);
}
</script>
<body>
<!-- 用于显示时间 -->
<div id="print"></div>
<button onclick="beginCount()">开始计时</button>
<button onclick="stopCount1()">暂停计时</button>
<button onclick="beginCount2()">继续计时</button>
<button onclick="stopCount2()">暂停计时2</button>
<button onclick="setZero()">重新开始计时</button>
</body>
结果如下：
测试发现，【开始计时】后按下【暂停计时】可以实现暂停计时，接着按下【继续计时】，可以接着继续计时；但此时如果按下【暂停计时】计时不会暂停，需要按下【暂停计时2】计时才会暂停。这是因为变量的缘故。
此时如果想要继续计时，按下【继续计时】是没有反应的，原因在于countTime2变量被设置了clearInterval（跟最初的代码一样的原因）。
所以此时如果需要继续计时，按下【开始计时】就可以实现。这感觉是如果不是同一个变量，就可以实现计时的开始和暂停。
后来为了简化，于是就设置两个变量，同时有一个判断变量进行变量的切换。于是就有了下面的代码。
// 定义两个参数变量，进行轮流计时。
var countTime1;
var countTime2;
// 定义一个函数切换变量，用于进行参数切换。
var judgement = true;、
// 开始计时
function beginCount(){
if(judgement==true){
countTime1 = setInterval(countTime,1000);
}
else if(judgement == false){
countTime2 = setInterval(countTime,1000);
}
}
// 暂停计时
function stopCount(){
if(judgement==true){
var stop1 = clearInterval(countTime1);
judgement = false;
}
else if(judgement==false){
var stop2 = clearInterval(countTime2);
judgement = true;
}
}