JS使用setInterval计时器实现挑战10秒
更新时间：2020年11月08日 09:52:22 作者：花落(→)凋谢
这篇文章主要为大家详细介绍了JS使用setInterval计时器实现挑战10秒，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现挑战10秒，主要用到setInterval计时器，供大家参考，具体内容如下
效果图
## 完整代码
<html lang="en">
<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>
更多关于倒计时的文章请查看专题： 《倒计时功能》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了js获取Element元素的四种常用方法,通过介绍getElementById、getElementsByClassName、getElementsByTagName和querySelector等方法,帮助读者了解如何通过不同的方式获取页面中的元素,感兴趣的可以了解一下2023-08-08
这篇文章主要介绍了JS脚本实现动态给标签控件添加事件的方法,结合实例形式分析了javascript添加事件监听的相关实现技巧,需要的朋友可以参考下2016-06-06
这篇文章主要介绍了CocosCreator经典入门项目之flappybird，详细说明了制作的每个步骤，还有详尽的代码，对CocosCreator感兴趣的同学，一定要看一下2021-04-04
这篇文章主要为大家详细介绍了JS实现标签页切换效果的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
最近在看一些Javascript玩魔术的资料，感叹那些真正的是在玩技术，相当让人佩服。2011-04-04
这篇文章主要介绍了纯javascript实现选择框的全选与反选 ,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了TypeScript如何开启严格空值检查，文章围绕TypeScript的相关资料展开详情内容，需要的小伙伴可以参考一下2022-03-03
下面小编就为大家带来一篇原生js的ajax和解决跨域的jsonp(实例讲解)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-10-10
这篇文章主要介绍了JavaScript：ES2019 的新特性(译),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
在日常工作和生活中,我们经常需要处理各种各样的待办事项,这篇文章主要为大家详细介绍了如何使用JavaScript实现一个功能丰富的待办事项应用,需要的可以了解下2024-01-01
最新评论