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);
            }

 

效果图如下：