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


Posted in Javascript onNovember 08, 2020

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

效果图

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

## 完整代码

<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 相关文章推荐
统计出现最多的字符次数的js代码
Dec 03 Javascript
js的匿名函数使用介绍
Dec 11 Javascript
Javascript基础教程之数组 array
Jan 18 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
JavaScript错误处理
Feb 03 Javascript
jquery广告无缝轮播实例
Jan 05 Javascript
微信小程序 小程序制作及动画(animation样式)详解
Jan 06 Javascript
JS实现加载和读取XML文件的方法详解
Apr 24 Javascript
JavaScript设计模式之原型模式分析【ES5与ES6】
Jul 26 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
Aug 13 Javascript
Node.js开发之套接字(socket)编程入门示例
Nov 05 Javascript
vue缓存之keep-alive的理解和应用详解
Nov 02 Javascript
JS实现手风琴特效
Nov 08 #Javascript
JS画布动态实现黑客帝国背景效果
Nov 08 #Javascript
vue.js页面加载执行created,mounted的先后顺序说明
Nov 07 #Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 #Javascript
解决vue props传Array/Object类型值,子组件报错的情况
Nov 07 #Javascript
解决Vue watch里调用方法的坑
Nov 07 #Javascript
浅谈vue.watch的触发条件是什么
Nov 07 #Javascript
You might like
php利用单例模式实现日志处理类库
2014/02/10 PHP
讲解WordPress中用于获取评论模板和搜索表单的PHP函数
2015/12/28 PHP
thinkPHP导出csv文件及用表格输出excel的方法
2015/12/30 PHP
使用Composer安装Yii框架的方法
2016/03/15 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
PHPCrawl爬虫库实现抓取酷狗歌单的方法示例
2017/12/21 PHP
PHP获取文件扩展名的常用方法小结【五种方式】
2018/04/27 PHP
使用JQuery和CSS模拟超链接的用户单击事件的实现代码
2012/05/23 Javascript
js的参数有长度限制吗?发现不能超过2083个字符
2014/04/20 Javascript
setTimeout内不支持jquery的选择器的解决方案
2015/04/28 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
关于Vue.js 2.0的Vuex 2.0 你需要更新的知识库
2016/11/30 Javascript
js中小数向上取整数,向下取整数,四舍五入取整数的实现(必看篇)
2017/02/13 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
ES6中Class类的静态方法实例小结
2017/10/28 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
2019/04/28 Javascript
小程序websocket心跳库(websocket-heartbeat-miniprogram)
2020/02/23 Javascript
vue制作抓娃娃机的示例代码
2020/04/17 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python中用sleep()方法操作时间的教程
2015/05/22 Python
Python实现简单的文件传输与MySQL备份的脚本分享
2016/01/03 Python
Python中Collections模块的Counter容器类使用教程
2016/05/31 Python
python基础之入门必看操作
2017/07/26 Python
Python实现时钟显示效果思路详解
2018/04/11 Python
基于随机梯度下降的矩阵分解推荐算法(python)
2018/08/31 Python
Python使用type关键字创建类步骤详解
2019/07/23 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
完美解决jupyter由于无法import新包的问题
2020/05/26 Python
详解pyinstaller生成exe的闪退问题解决方案
2020/06/19 Python
夜大毕业生自我评价分享
2013/11/10 职场文书
荷叶母亲教学反思
2014/04/30 职场文书
2015年保险公司工作总结
2015/04/24 职场文书
追悼会悼词大全
2015/06/23 职场文书
python解析照片拍摄时间进行图片整理
2022/07/23 Python