js 计时器小练-20160601

时间:2023-03-08 16:33:36
js 计时器小练-20160601
今天要做一个计时器小练,所以我就做了练习,代码如下。
        // 初始化时间,以及定义全局量去接收计时器
var timer = 0;
var t;
var h, min, sec, millisec;
// 触发按钮的点击事件
document.getElementById("btn").addEventListener("click", function() {
// 获取按钮上面的内容
var text = document.getElementById("btn").innerText;
// 判断按钮上面的内容,也就是把按钮上面的内容作为标识
if (text == "开始") {
// 当按下“开始”按钮的时候,按钮上面的文字变为“结束”,并且调用计时函数
this.innerText = "结束";
setTime();
} else {
// 当按下“结束”按钮的时候,按钮上面的文字变为“开始”,并且暂停计时
this.innerText = "开始";
clearTimeout(t);
}
});
// 计时函数
function setTime() {
timer++;
// 转化为时,分,秒,毫秒
h = parseInt(timer / (3600 * 100));
min = parseInt(timer / (60 * 100) % 60);
sec = parseInt(timer / 100 % 60);
millisec = timer % 100;
// 通过判断时分秒小于10,在前面加“0”
if (sec < 10) {
sec = "0" + sec;
}
if (min < 10) {
min = "0" + min;
}
if (h < 10) {
h = "0" + h;
}
// 在input中显示结果
document.getElementById("content").value = h + ":" + min + ":" + sec + ":" + millisec;
t = setTimeout(setTime, 10);
}

 

效果图如下:

js 计时器小练-20160601