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 相关文章推荐
永不消失的title提示代码
Feb 15 Javascript
JQuery插件ajaxfileupload.js异步上传文件实例
May 19 Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
微信小程序教程之本地图片上传(leancloud)实例详解
Nov 16 Javascript
两种简单的跨域方法(jsonp、php)
Jan 02 Javascript
AngularJS 限定$scope的范围实例详解
Jun 23 Javascript
小程序实现自定义导航栏适配完美版
Apr 02 Javascript
layui table 表格模板按钮的实例代码
Sep 21 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 Javascript
js this 绑定机制深入详解
Apr 30 Javascript
Vue中ref和$refs的介绍以及使用方法示例
Jan 11 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
在PHP3中实现SESSION的功能(一)
2006/10/09 PHP
解析csv数据导入mysql的方法
2013/07/01 PHP
PHP获取栏目的所有子级和孙级栏目的ID号示例
2014/04/01 PHP
php实现给图片加灰色半透明效果的方法
2014/10/20 PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
2014/10/20 PHP
PHP操作FTP类 (上传、下载、移动、创建等)
2016/03/31 PHP
摘自启点的main.js
2008/04/20 Javascript
jQuery UI AutoComplete 自动完成使用小记
2010/08/21 Javascript
JS判断移动端访问设备并加载对应CSS样式
2014/06/13 Javascript
jQuery中animate()方法用法实例
2014/12/24 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
2016/01/26 Javascript
JavaScript html5 canvas画布中删除一个块区域的方法
2016/01/26 Javascript
Node.js自定义实现文件路由功能
2017/09/22 Javascript
Vue中使用sass实现换肤功能
2018/09/07 Javascript
vue.js中proxyTable 转发请求的实现方法
2018/09/20 Javascript
微信小程序引用iconfont图标的方法
2018/10/22 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
Vue实现手机号、验证码登录(60s禁用倒计时)
2020/12/19 Vue.js
js实现类选择器和name属性选择器的示例步骤
2021/02/07 Javascript
[01:09]DOTA2次级职业联赛 - ishow.HMM战队宣传片
2014/12/01 DOTA
[03:40]DOTA2抗疫特别篇《英雄年代》
2020/02/28 DOTA
Python将xml和xsl转换为html的方法
2015/03/10 Python
pandas将DataFrame的列变成行索引的方法
2018/04/10 Python
python os.path模块常用方法实例详解
2018/09/16 Python
Python设计模式之原型模式实例详解
2019/01/18 Python
Python 抓取数据存储到Redis中的操作
2020/07/16 Python
HTML5是否真的可以取代Flash
2010/02/10 HTML / CSS
用canvas实现图片滤镜效果附演示
2013/11/05 HTML / CSS
手把手教你实现一个canvas智绘画板的方法
2019/03/04 HTML / CSS
花园仓库建筑:Garden Buildings Direct
2018/02/16 全球购物
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
年级组长自我鉴定
2014/02/22 职场文书
装修活动策划方案
2014/08/27 职场文书
教师工作自我鉴定范文
2014/09/14 职场文书
祖国在我心中演讲稿600字
2014/09/23 职场文书
工作违纪检讨书范文
2015/01/26 职场文书