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中ajax学习笔记一
Oct 16 Javascript
Query中click(),bind(),live(),delegate()的区别
Nov 19 Javascript
jquery操作 iframe的方法
Dec 03 Javascript
jQuery前端框架easyui使用Dialog时bug处理
Dec 05 Javascript
JavaScript中的replace()方法使用详解
Jun 06 Javascript
JavaScript的MVVM库Vue.js入门学习笔记
May 03 Javascript
Bootstrap作品展示站点实战项目2
Oct 14 Javascript
js浏览器html5表单验证
Oct 17 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
Vue2.0用 watch 观察 prop 变化(不触发)
Sep 08 Javascript
Angular CLI 安装和使用教程
Sep 13 Javascript
监听element-ui table滚动事件的方法
Mar 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
批量获取memcache值并按key的顺序返回的实现代码
2011/06/14 PHP
PHP实现数组递归转义的方法
2014/08/28 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
php获取微信openid方法总结
2019/10/10 PHP
Laravel5.1 框架响应基本用法实例分析
2020/01/04 PHP
PHP isset()及empty()用法区别详解
2020/08/29 PHP
非常不错的功能强大代码简单的管理菜单美化版
2008/07/09 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
js关闭当前页面(窗口)的几种方式总结
2013/03/05 Javascript
浅谈String.valueOf()方法的使用
2016/06/06 Javascript
js判断空对象的实例(超简单)
2016/07/26 Javascript
vuejs父子组件通信的问题
2017/01/11 Javascript
vue页面使用阿里oss上传功能的实例(二)
2017/08/09 Javascript
vue2.0 解决抽取公用js的问题
2020/07/31 Javascript
vue pages 多入口项目 + chainWebpack 全局引用缩写说明
2020/09/21 Javascript
JavaScript 防抖和节流遇见的奇怪问题及解决
2020/11/20 Javascript
[55:45]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第三场 8.24
2019/09/10 DOTA
编写同时兼容Python2.x与Python3.x版本的代码的几个示例
2015/03/30 Python
利用Django框架中select_related和prefetch_related函数对数据库查询优化
2015/04/01 Python
Python实现的根据IP地址计算子网掩码位数功能示例
2018/05/23 Python
使用django-guardian实现django-admin的行级权限控制的方法
2018/10/30 Python
django框架auth模块用法实例详解
2019/12/10 Python
Python异常处理机制结构实例解析
2020/07/23 Python
css3 iphone玻璃透明气泡完美实现
2013/03/20 HTML / CSS
HTML5手机端弹出遮罩菜单特效代码
2016/01/27 HTML / CSS
Html5调用手机摄像头并实现人脸识别的实现
2018/12/21 HTML / CSS
Kipling凯浦林美国官网:世界著名时尚休闲包袋品牌
2016/08/24 全球购物
几道Java和数据库的面试题
2013/05/30 面试题
推广活动策划方案
2014/08/23 职场文书
法制教育演讲稿
2014/09/10 职场文书
群众路线个人整改方案
2014/10/25 职场文书
贫困生助学金感谢信
2015/01/21 职场文书
北京青年观后感
2015/06/15 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
创业者如何撰写出一份打动投资人的商业计划书?
2019/07/02 职场文书