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 相关文章推荐
新浪中用来显示flash的函数
Apr 02 Javascript
jQuery live( type, fn ) 委派事件实现
Oct 11 Javascript
JQery jstree 大数据量问题解决方法
Mar 09 Javascript
按下回车键指向下一个位置的一个函数代码
Mar 10 Javascript
animate 实现滑动切换效果【实例代码】
May 05 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
AngularJS点击添加样式、点击变色设置的实例代码
Jul 27 Javascript
详解Vue前端对axios的封装和使用
Apr 01 Javascript
node.js使用mongoose操作数据库实现购物车的增、删、改、查功能示例
Dec 23 Javascript
在Angular项目使用socket.io实现通信的方法
Jan 05 Javascript
Vue 集成 PDF.js 实现 PDF 预览和添加水印的步骤
Jan 22 Vue.js
vue ref如何获取子组件属性值
Mar 31 Vue.js
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 按位与或 (^ 、&amp;)
2013/06/21 PHP
新手菜鸟必读:session与cookie的区别
2013/08/22 PHP
PHP生成静态HTML文档实现代码
2016/06/23 PHP
bindParam和bindValue的区别以及在Yii2中的使用详解
2018/03/12 PHP
Javascript var变量隐式声明方法
2009/10/19 Javascript
jquery实现输入框动态增减的实例代码
2013/07/14 Javascript
跟我学习javascript的var预解析与函数声明提升
2015/11/16 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
Node.js使用cookie保持登录的方法
2018/05/11 Javascript
jQuery实现输入框的放大和缩小功能示例
2018/07/21 jQuery
js中的深浅拷贝问题简析
2019/05/10 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
Vue使用lodop实现打印小结
2019/07/06 Javascript
javascript单张多张图无缝滚动实例代码
2020/05/10 Javascript
微信小程序接入vant Weapp组件的详细步骤
2020/10/28 Javascript
[01:45]亚洲邀请赛互动指南虚拟物品介绍
2015/01/30 DOTA
python 多线程应用介绍
2012/12/19 Python
微信跳一跳辅助python代码实现
2018/01/05 Python
Python基于csv模块实现读取与写入csv数据的方法
2018/01/18 Python
python 对key为时间的dict排序方法
2018/10/17 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
video下autoplay属性无效的解决方法(添加muted属性)
2020/05/19 HTML / CSS
网上常见的一份Linux面试题(多项选择部分)
2014/09/09 面试题
四种会话跟踪技术
2015/05/20 面试题
安全生产检讨书
2014/01/21 职场文书
七年级数学教学反思
2014/01/22 职场文书
民主评议党员自我鉴定
2014/10/21 职场文书
铣工实训报告
2014/11/05 职场文书
党校学习党性分析材料
2014/12/19 职场文书
个人年度总结报告
2015/03/09 职场文书
机关干部正风肃纪心得体会
2016/01/15 职场文书
初中美术教学反思
2016/02/17 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
golang elasticsearch Client的使用详解
2021/05/05 Golang
Python中json.dumps()函数的使用解析
2021/05/17 Python