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 1.8 Release版本发布了
Aug 14 Javascript
JQuery+DIV自定义滚动条样式的具体实现
Jun 25 Javascript
jquery获取tagName再进行判断
May 29 Javascript
js+CSS实现弹出居中背景半透明div层的方法
Feb 26 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
理解javascript async的用法
Aug 22 Javascript
薪资那么高的Web前端必看书单
Oct 13 Javascript
vue实现局部刷新的实现示例
Apr 16 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 Javascript
vue将data恢复到初始状态 &amp;&amp; 重新渲染组件实例
Sep 04 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
改进的IP计数器
2006/10/09 PHP
php结合ajax实现赞、顶、踩功能实例
2014/05/12 PHP
php实现获取文件mime类型的方法
2015/02/11 PHP
PHP递归调用数组值并用其执行指定函数的方法
2015/04/01 PHP
php获得客户端浏览器名称及版本的方法(基于ECShop函数)
2015/12/23 PHP
详解php中空字符串和0之间的关系
2016/10/23 PHP
ThinkPHP5框架实现简单的批量查询功能示例
2018/06/07 PHP
用js实现的仿sohu博客更换页面风格(简单版)
2007/03/22 Javascript
jquery插件之easing使用
2010/08/19 Javascript
textarea中的手动换行处理的jquery代码
2011/02/26 Javascript
js禁止document element对象选中文本实现代码
2013/03/21 Javascript
javascript从右边截取指定字符串的三种实现方法
2013/11/29 Javascript
jQuery实现统计复选框选中数量
2014/11/24 Javascript
JS+CSS实现精美的二级导航效果代码
2015/09/17 Javascript
dedecms页面如何获取会员状态的实例代码
2016/03/15 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
AngularJs bootstrap搭载前台框架——js控制部分
2016/09/01 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
JS删除数组里的某个元素方法
2018/02/03 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
nuxt框架中路由鉴权之Koa和Session的用法
2018/05/09 Javascript
vue实现树形结构样式和功能的实例代码
2019/10/15 Javascript
如何利用JavaScript编写更好的条件语句详解
2020/08/10 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
Python爬虫框架Scrapy基本用法入门教程
2018/07/26 Python
Python正则表达式匹配和提取IP地址
2019/06/06 Python
python多进程(加入进程池)操作常见案例
2019/10/21 Python
python实现交并比IOU教程
2020/04/16 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
python3.9.1环境安装的方法(图文)
2021/02/02 Python
莫斯科绝对前卫最秘密的商店:SVMoscow
2017/10/23 全球购物
优秀中专生推荐信
2013/11/17 职场文书
幼儿园保教管理制度
2014/02/03 职场文书
阳光体育活动实施方案
2014/05/25 职场文书
预备党员入党感言
2015/08/01 职场文书
2019年亲子运动会口号
2019/10/11 职场文书