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 setInterval()与setTimeout()计时器
- JS使用setInterval实现的简单计时器功能示例
- JS 倒计时实现代码(时、分,秒)
- JS实现倒计时(天数、时、分、秒)
- 简单易用的倒计时js代码
- js代码实现点击按钮出现60秒倒计时
- 2种简单的js倒计时方式
- 原生JS实现简单的倒计时功能示例
- js几秒以后倒计时跳转示例
- 一个不错的js html页面倒计时可精确到秒
本文由 华域联盟 原创撰写:华域联盟 » JS使用setInterval计时器实现挑战10秒
转载请保留出处和原文链接:https://www.cnhackhy.com/42101.htm