js 计时器小练-20160601

今天要做一个计时器小练，所以我就做了练习，代码如下。

 1 　　　　　　　// 初始化时间，以及定义全局量去接收计时器
 2             var timer = 0;
 3             var t;
 4             var h, min, sec, millisec;
 5             // 触发按钮的点击事件
 6             document.getElementById("btn").addEventListener("click", function() {
 7                 // 获取按钮上面的内容
 8                 var text = document.getElementById("btn").innerText;
 9                 // 判断按钮上面的内容，也就是把按钮上面的内容作为标识
10                 if (text == "开始") {
11                     // 当按下“开始”按钮的时候，按钮上面的文字变为“结束”，并且调用计时函数
12                     this.innerText = "结束";
13                     setTime();
14                 } else {
15                     // 当按下“结束”按钮的时候，按钮上面的文字变为“开始”，并且暂停计时
16                     this.innerText = "开始";
17                     clearTimeout(t);
18                 }
19             });
20             // 计时函数
21             function setTime() {
22                 timer++;
23                 // 转化为时，分，秒，毫秒
24                 h = parseInt(timer / (3600 * 100));
25                 min = parseInt(timer / (60 * 100) % 60);
26                 sec = parseInt(timer / 100 % 60);
27                 millisec = timer % 100;
28                 // 通过判断时分秒小于10，在前面加“0”
29                 if (sec < 10) {
30                     sec = "0" + sec;
31                 }
32                 if (min < 10) {
33                     min = "0" + min;
34                 }
35                 if (h < 10) {
36                     h = "0" + h;
37                 }
38                 // 在input中显示结果
39                 document.getElementById("content").value = h + ":" + min + ":" + sec + ":" + millisec;
40                 t = setTimeout(setTime, 10);
41             }

效果图如下：