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编程起步(第三课)
Feb 27 Javascript
防止浏览器记住用户名及密码的简单实用方法
Apr 22 Javascript
Select标签下拉列表二级联动级联实例代码
Feb 07 Javascript
Jquery获取元素的父容器对象示例代码
Feb 10 Javascript
Javascript实现单张图片浏览
Dec 18 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
BootStrap扔进Django里的方法详解
May 13 Javascript
JS原型链 详解及示例代码
Sep 06 Javascript
jquery ajaxfileuplod 上传文件 essyui laoding 效果【防止重复上传文件】
May 26 jQuery
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
jQuery属性选择器用法实例分析
Jun 28 jQuery
google广告之另类js调用实现代码
Aug 22 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
体育彩票排列三组选三算法分享
2014/03/07 PHP
Yii安装与使用Excel扩展的方法
2016/07/13 PHP
PHP中new static()与new self()的比较
2016/08/19 PHP
PHP在innodb引擎下快速代建全文搜索功能简明教程【基于xunsearch】
2016/10/14 PHP
PHP使用PDO调用mssql存储过程的方法示例
2017/10/07 PHP
符合W3C网页标准的iframe标签的使用方法
2007/07/19 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
JS 获取select(多选下拉)中所选值的示例代码
2013/08/02 Javascript
jQuery的css()方法用法实例
2014/12/24 Javascript
jQuery实现冻结表头的方法
2015/03/09 Javascript
jQuery 生成svg矢量二维码
2016/08/09 Javascript
JS获取中文拼音首字母并通过拼音首字母快速查找页面内对应中文内容的方法【附demo源码】
2016/08/19 Javascript
微信小程序 wx.uploadFile无法上传解决办法
2016/12/14 Javascript
Vue.js自定义指令的用法与实例解析
2017/01/18 Javascript
jquery精度计算代码 jquery指定精确小数位
2017/02/06 Javascript
vue初尝试--项目结构(推荐)
2018/01/30 Javascript
解决layui 复选框等内置控件不显示的问题
2018/08/14 Javascript
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
[01:56]《DOTA2》中文配音CG
2013/04/22 DOTA
[57:16]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS VG第二场
2014/05/26 DOTA
[46:43]DOTA2上海特级锦标赛D组小组赛#1 EG VS COL第三局
2016/02/28 DOTA
[00:47]DOTA2荣耀之路6:天火,天火!
2018/05/30 DOTA
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
简单掌握Python中glob模块查找文件路径的用法
2016/07/05 Python
解决torch.autograd.backward中的参数问题
2020/01/07 Python
严选全球尖货,立足香港:Bonpont宝盆
2018/07/24 全球购物
斯洛伐克电子产品购物网站:DATART
2020/04/05 全球购物
前台文员岗位职责
2013/12/28 职场文书
一年级语文教学反思
2014/02/13 职场文书
不忘国耻振兴中华演讲稿
2014/05/14 职场文书
求职信名称怎么写
2014/05/26 职场文书
地球一小时宣传标语
2014/06/24 职场文书
《爱的教育》读书心得
2014/11/08 职场文书
承兑汇票转让证明怎么写?
2014/11/30 职场文书
采购员岗位职责
2015/02/03 职场文书
五一放假通知怎么写
2015/08/18 职场文书