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 异步方法队列链实现代码分析
Jun 05 Javascript
JS简单的轮播的图片滚动实例
Jun 17 Javascript
js获取当月最后一天实例代码
Nov 19 Javascript
parentElement,srcElement的使用小结
Jan 13 Javascript
jQuery根据ID获取input、checkbox、radio、select的示例
Aug 11 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
AngularJS的依赖注入实例分析(使用module和injector)
Jan 19 Javascript
详解使用angular框架离线你的应用(pwa指南)
Jan 31 Javascript
layer.open组件获取弹出层页面变量、函数的实例
Sep 25 Javascript
JS简单表单验证功能完整示例
Jan 26 Javascript
使用Node.js实现base64和png文件相互转换的方法
Mar 11 Javascript
vue 页面回退mounted函数不执行的解决方案
Jul 26 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 和 COM
2006/10/09 PHP
php上传图片到指定位置路径保存到数据库的具体实现
2013/12/30 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
python进程与线程小结实例分析
2018/11/11 PHP
PHP5.6读写excel表格文件操作示例
2019/02/26 PHP
js弹出模式对话框,并接收回传值的方法
2013/03/12 Javascript
基于NodeJS的前后端分离的思考与实践(六)Nginx + Node.js + Java 的软件栈部署实践
2014/09/26 NodeJs
seajs模块之间依赖的加载以及模块的执行
2016/10/21 Javascript
jQuery实现鼠标滑过图片移动特效
2016/12/08 Javascript
解析JavaScript模仿块级作用域
2016/12/29 Javascript
详谈JavaScript的闭包及应用
2017/01/17 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
2017/07/24 Javascript
Vue.js划分组件的方法
2017/10/29 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
JavaScript继承定义与用法实践分析
2018/05/28 Javascript
微信小程序显示倒计时功能示例【测试可用】
2018/12/03 Javascript
vue.js仿hover效果的实现方法示例
2019/01/28 Javascript
vue设计一个倒计时秒杀的组件详解
2019/04/06 Javascript
vue按需加载实例详解
2019/09/06 Javascript
从零使用TypeScript开发项目打包发布到npm
2020/02/14 Javascript
JS跨浏览器解析XML应用过程详解
2020/10/16 Javascript
[00:50]2014DOTA2国际邀请赛 NEWBEE战队回顾
2014/08/01 DOTA
Python中if __name__ == &quot;__main__&quot;详细解释
2014/10/21 Python
Python数据类型详解(四)字典:dict
2016/05/12 Python
python实现日常记账本小程序
2018/03/10 Python
python 删除字符串中连续多个空格并保留一个的方法
2018/12/22 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
python实现二分类和多分类的ROC曲线教程
2020/06/15 Python
日本高端护肤品牌:Tatcha
2016/08/29 全球购物
《两只鸟蛋》教学反思
2014/02/10 职场文书
公司委托书格式范文
2014/10/09 职场文书
水电工程师岗位职责
2015/02/13 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
《走遍天下书为侣》教学反思
2016/02/22 职场文书
公司趣味运动会开幕词
2016/03/04 职场文书
导游词之崇武古城
2019/10/07 职场文书