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 相关文章推荐
基于jquery的获取浏览器窗口大小的代码
Mar 28 Javascript
js获取鼠标点击的位置实现思路及代码
May 09 Javascript
JS实现左右拖动改变内容显示区域大小的方法
Oct 13 Javascript
使用AngularJS编写多选按钮选中时触发指定方法的指令代码详解
Jul 24 Javascript
实现两个文本框同时输入的实例
Sep 25 Javascript
vue数组对象排序的实现代码
Jun 20 Javascript
AngularJS自定义表单验证功能实例详解
Aug 24 Javascript
Bootstrap Table 双击、单击行获取该行及全表内容
Aug 31 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
Nov 06 Javascript
详解javascript replace高级用法
Feb 17 Javascript
搭建Vue从Vue-cli到router路由护卫的实现
Nov 14 Javascript
js利用iframe实现选项卡效果
Aug 09 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
咖啡的化学
2021/03/03 咖啡文化
.htaccess文件保护实例讲解
2011/02/06 PHP
常用的PHP数据库操作方法(MYSQL版)
2011/06/08 PHP
PHP获取用户的浏览器与操作系统信息的代码
2012/09/04 PHP
ThinkPHP中类的构造函数_construct()与_initialize()的区别详解
2017/03/13 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
HR vs ForZe BO3 第一场 2.13
2021/03/10 DOTA
jQuery动态添加 input type=file的实现代码
2012/06/14 Javascript
js实现简单锁屏功能实例
2015/05/27 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
你不知道的高性能JAVASCRIPT
2016/01/18 Javascript
利用jQuery中的ajax分页实现代码
2016/02/25 Javascript
jQuery弹出层后禁用底部滚动条(移动端关闭回到原位置)
2016/08/29 Javascript
浅谈JavaScript的闭包函数
2016/12/08 Javascript
jQuery实现 RadioButton做必选校验功能
2017/06/15 jQuery
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
微信小程序把百度地图坐标转换成腾讯地图坐标过程详解
2019/07/10 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
深入解析Python中的线程同步方法
2016/06/14 Python
Python基于回溯法子集树模板解决马踏棋盘问题示例
2017/09/11 Python
python将秒数转化为时间格式的实例
2018/09/16 Python
python查找指定文件夹下所有文件并按修改时间倒序排列的方法
2018/10/21 Python
python用插值法绘制平滑曲线
2021/02/19 Python
python3下pygame如何实现显示中文
2020/01/11 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
马来西亚和新加坡巴士票在线预订:CatchThatBus
2018/11/17 全球购物
幼儿园中班上学期评语
2014/04/18 职场文书
党支部换届选举方案
2014/05/08 职场文书
霸气押韵的班级口号
2014/06/09 职场文书
大学教师师德师风演讲稿
2014/08/22 职场文书
2014国庆节国旗下演讲稿(精选版)
2014/09/26 职场文书
2016关于军训的心得体会
2016/01/11 职场文书
mysql left join快速转inner join的过程
2021/06/30 MySQL