JS使用setInterval计时器实现挑战10秒

码农网前端开发 2024年05月26日 352 浏览

文章详情

JS实现挑战10秒，主要用到setInterval计时器，供大家参考，具体内容如下

效果图

JS使用setInterval计时器实现挑战10秒

## 完整代码

<html>
<head>
<meta charset="UTF-8">
<title>js计时器</title>
</head>
<body>
<p style="font-size: 2em;color: blue;font-style: italic;">挑战10.00秒</p>
<p id="time" style="font-size: 2em;color: red;">00:00</p>
<input type="button" value="开始" onclick="oStart()">
<input type="button" value="结束" onclick="oStop()">
<input type="button" value="重置" onclick="oReset()">
<script>
var n= 0, timer=null;
var txt=document.getElementById("time");
//开始计时
function oStart() {
clearInterval(timer);
timer=setInterval(function () {
n++;
var m=parseInt(n/60);
var s=parseInt(n%60);
txt.innerText=toDub(m)+":"+toDub(s);
},1000/60);
};
//暂停并且清空计时器
function oStop() {
clearInterval(timer);
//  txt.innerText="我爱你";
}
//重置
function oReset() {
txt.innerText="00:00";
n=0;
}
//补零
function toDub(n){
return n<10?"0"+n:n;
}
</script>
</body>
</html>

更多关于倒计时的文章请查看专题： 《倒计时功能》

以上就是本文的全部内容，希望对大家的学习有所帮助。

版权：版权申明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 70068002@qq.com 举报，一经查实，本站将立刻删除。

转载请注明出处：https://www.stntk.com/2482.html

码农网