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 相关文章推荐
学习ExtJS Column布局
Oct 08 Javascript
js几个验证函数代码
Mar 25 Javascript
jquery一般方法介绍 入门参考
Jun 21 Javascript
js动画效果制件让图片组成动画代码分享
Jan 14 Javascript
论Bootstrap3和Foundation5网格系统的异同
May 16 Javascript
iscroll碰到Select无法选择下拉刷新的解决办法
May 21 Javascript
基于MVC+EasyUI的web开发框架之使用云打印控件C-Lodop打印页面或套打报关运单信息
Aug 29 Javascript
浅谈Web页面向后台提交数据的方式和选择
Sep 23 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
解决layui的radio属性或别的属性没显示出来的问题
Sep 26 Javascript
微信小程序动态设置图片大小的方法
Nov 21 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
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
PHP处理数组和XML之间的互相转换
2016/06/02 PHP
Yii框架创建cronjob定时任务的方法分析
2017/05/23 PHP
jquery中$.post()方法的简单实例
2014/02/04 Javascript
jquery.Ajax()方法调用Asp.Net后台的方法解析
2014/02/13 Javascript
js怎么覆盖原有方法实现重写
2014/09/04 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
JS+CSS3制作炫酷的弹窗效果
2016/11/08 Javascript
JavaScript数据类型的存储方法详解
2017/08/25 Javascript
使用JQuery实现图片轮播效果的实例(推荐)
2017/10/24 jQuery
浅谈vue引入css,less遇到的坑和解决方法
2018/01/20 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
2020/02/12 Javascript
公众号SVG动画交互实战代码
2020/05/31 Javascript
python实现mysql的读写分离及负载均衡
2018/02/04 Python
python smtplib模块自动收发邮件功能(二)
2018/05/22 Python
numpy判断数值类型、过滤出数值型数据的方法
2018/06/09 Python
Python中flatten( )函数及函数用法详解
2018/11/02 Python
python实现微信防撤回神器
2019/04/29 Python
html5超简单的localStorage实现记住密码的功能实现
2017/09/07 HTML / CSS
美国家用电器和电子产品商店:Abt
2016/09/06 全球购物
eBay德国站:eBay.de
2017/09/14 全球购物
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
Booking.com英国官网:全球酒店在线预订网站
2018/04/21 全球购物
经济学人订阅:The Economist
2018/07/19 全球购物
高中军训感言400字
2014/02/24 职场文书
元宵节主持词
2014/03/25 职场文书
父母对孩子说的话
2014/04/12 职场文书
计划生育证明书写要求
2014/09/17 职场文书
2014学校领导四风问题对照检查材料思想汇报
2014/09/22 职场文书
2014年幼儿园教师工作总结
2014/11/08 职场文书
民事和解协议书格式
2014/11/29 职场文书
护士自荐信范文(2016推荐篇)
2016/01/28 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python