带次记录的JS计时器

浏览：925次- 评论：1次- 发布时间：2022-12-12

Html

Css

var time = document.querySelector(".time")
var abc = document.querySelector(".abc")
var reset = document.querySelector(".reset")
var btn = document.querySelector(".btn")
var stop = document.querySelector(".stop")
var text = document.querySelector(".text")

var minutes = seconds = msec = n = 0
btn.innerHTML = "开始计时"
time.innerHTML = "00:00:00" //默认显示时间
// 点击中间的按钮进行判断并执行相应的操作
btn.onclick = function() {
    if (btn.innerHTML === "开始计时" || btn.innerHTML === "继续计时") {
        btn.innerHTML = "暂停计时";
        reset.style.visibility = "hidden"; //左边按钮'重置计时'隐藏
        stop.style.visibility = "visible";; //右边按钮'记录时间'显示

// 设置时间显示定时器timing，每10毫秒刷新显示一次
        timing = setInterval(function() {
            msec++;
            if (msec / 100 === 1) {
                seconds++;
                msec = 0;
            } else if (seconds / 60 === 1) {
                minutes++;
                seconds = 0;
            }
            // 显示时间，且当分钟、秒、毫秒为个位数时，在前面补0
            time.innerHTML = (minutes < 10 ? '0' + minutes : minutes) + ":" + (seconds < 10 ? '0' + seconds : seconds) + '.' + (msec < 10 ? '0' + msec : msec);
        }, 10)
        stop.onclick = function() {
            n++;
            p1 = document.createElement("p");
            p1.innerHTML = time.innerHTML;
            text.appendChild(p1)

}
    } else {
        clearInterval(timing);
        btn.innerHTML = "继续计时"
        stop.style.visibility = 'hidden'; //右边按钮'记录时间'隐藏
        reset.style.visibility = 'visible'; //左边按钮'重置计时'显示
        reset.onclick = function() {
            minutes = seconds = msec = n = 0;
            //计时器当前显示时间重置为00:00.00
            time.innerHTML = '0' + minutes + ":0" + seconds + ".0" + msec;
            text.innerHTML = null;
            reset.style.visibility = 'hidden';
            btn.innerHTML = "开始计时";
            abc.innerHTML = null;
        }
        clearInterval(abc)
    }

}

↑上面代码改变，会自动显示代码结果

jQuery调用版本：1.11.3