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>
更多关于倒计时的文章请查看专题： 《倒计时功能》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
外部JavaScript文件块下载和伤害你的页面的性能，但有一个简单的方法来解决此问题：并行使用动态脚本标记和加载脚本，提高页面加载速度和用户体验。2010-12-12
这篇文章主要为大家详细介绍了Bootstrap缩略图与警告框学习使用的相关资料，希望通过这篇文章和大家更多的去学习Bootstrap缩略图与警告框，从中得到收获2017-02-02
本文是小编给大家收藏的JavaScript 中频度最高的 10 种错误，我们会告诉你什么原因导致了这些错误，以及如何防止这些错误发生。需要的朋友参考下2018-02-02
这篇文章主要介绍了JavaScript学习笔记之数组求和方法的相关资料,需要的朋友可以参考下2016-03-03
JS OOP包机制,类创建的方法定义,需要的朋友可以参考下。2009-11-11
javascript attachEvent绑定多个事件执行顺序问题
执行顺序是没有规律的，但是每次执行的顺序是一样的，如果是随机那么应该每次执行的顺序都不一样才对，这才是我想要说明的2010-10-10
最近公司有一个需求，要做一个数据可视化的页面，所有的图表都在下面，做这些都是本人自己写的，全部都是真是的项目中的代码，包含有柱状图、折线图、水球图以及散点图，这里直接打出来给大家练手，希望大家多多支持，如果这篇文章对您有用的话必须收藏2022-08-08
uniapp页面通讯讲解之uni.$emit、uni.$on、uni.$once和uni.$off
uni-app 是一个使用vue.js开发所有前端应用的框架,下面这篇文章主要给大家介绍了关于uniapp页面通讯之uni.$emit、uni.$on、uni.$once和uni.$off的相关资料,需要的朋友可以参考下2022-09-09
这篇文章的目的只是让你认识控制台，让你入门调试js，之后的路还得靠你们自己走2014-06-06
今天小编就为大家分享一篇layui表单提交到后台自动封装到实体类的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
最新评论