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 相关文章推荐
Javascript 中介者模式实例
Dec 16 Javascript
javascript中&quot;/&quot;运算符常见错误
Oct 13 Javascript
jQuery弹出框代码封装DialogHelper
Jan 30 Javascript
Angularjs制作简单的路由功能demo
Apr 14 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
jQuery插件zTree实现获取当前选中节点在同级节点中序号的方法
Mar 08 Javascript
基于webpack 实用配置方法总结
Sep 28 Javascript
微信小程序使用audio组件播放音乐功能示例【附源码下载】
Dec 08 Javascript
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
Node.js使用cookie保持登录的方法
May 11 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
OpenLayers3实现对地图的基本操作
Sep 28 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中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
纯php生成随机密码
2015/10/30 PHP
thinkphp3.2点击刷新生成验证码
2016/02/16 PHP
php仿微信红包分配算法的实现方法
2016/05/13 PHP
微信支付开发动态链接Native支付
2016/07/12 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
checkbox选中与未选中判断示例
2014/08/04 Javascript
简单易用的倒计时js代码
2014/08/04 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
详解angular中的作用域及继承
2017/05/31 Javascript
Vue-Access-Control 前端用户权限控制解决方案
2017/12/01 Javascript
微信小程序实现给嵌套template模板传递数据的方式总结
2017/12/18 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
react脚手架如何配置less和ant按需加载的方法步骤
2018/11/28 Javascript
vue中使用props传值的方法
2019/05/08 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
Python实现Logger打印功能的方法详解
2017/09/01 Python
浅谈Python2获取中文文件名的编码问题
2018/01/09 Python
python3中eval函数用法使用简介
2019/08/02 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
python使用配置文件过程详解
2019/12/28 Python
python实现信号时域统计特征提取代码
2020/02/26 Python
Python使用xpath实现图片爬取
2020/09/16 Python
详解python模块pychartdir安装及导入问题
2020/10/22 Python
Microsoft Advertising美国:微软搜索广告
2019/05/01 全球购物
Rowdy Gentleman服装和配饰:美好时光
2019/09/24 全球购物
致跳远运动员加油稿
2014/02/11 职场文书
股份合作协议书范本
2014/04/14 职场文书
战略合作协议书范本
2014/04/18 职场文书
火箭队口号
2014/06/18 职场文书
国庆宣传标语
2014/06/30 职场文书
大学毕业典礼演讲稿
2014/09/09 职场文书
财务经理岗位职责
2015/01/31 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server
spring IOC容器的Bean管理XML自动装配过程
2022/05/30 Java/Android