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 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>
更多关于倒计时的文章请查看专题： 《倒计时功能》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持好吧啦网。
相关文章：
1. 使用Docker的NFS-Ganesha镜像搭建nfs服务器的详细过程2. Docker 部署 Prometheus的安装详细教程3. notepad++运行python脚本的操作方法4. IntelliJ IDEA安装插件的方法步骤5. 命令行CLI一键生成各种烦人的lint配置实例6. Docker究竟是什么 为什么这么流行 它的优点和缺陷有哪些？7. Java中有界队列的饱和策略(reject policy)原理解析8. Laravel Many-To-Many多对多关系模式示例详解9. Java HashSet集合存储遍历学生对象代码实例10. python实现数据结构中双向循环链表操作的示例
网公网安备