js计时器

Html

Css

    .box {
	width:300px;
	text-align:center;
	border:1px solid rebeccapurple;
	margin:100px auto;
}
.time {
	height:20px;
	font-size:20px;
}
button {
	width:80px;
	height:30px;
	cursor:pointer;
	border-radius:20px;
}
.reset,.stop {
	visibility:hidden;
	border-radius:20px;
	background-color:aqua;
}
.abc {
	display:none;
}

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

立即下载

js计时器



代码描述：js秒表、计时器代码

更新时间：2022-12-04 23:37:19

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

猫

相关代码

js计时器

最新