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 获取元素位置的快速方法 getBoundingClientRect()
Nov 26 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
一个JavaScript变量声明的知识点
Oct 28 Javascript
JavaScript中使用自然对数ln的方法
Jun 14 Javascript
移动端JQ插件hammer使用详解
Jul 03 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
js提取中文拼音首字母的封装工具类
Mar 12 Javascript
js实现各浏览器全屏代码实例
Jul 03 Javascript
JavaScript&quot;模拟事件&quot;的注意要点详解
Feb 13 Javascript
微信小程序自定义弹窗实现详解(可通用)
Jul 04 Javascript
layui富文本编辑器前端无法取值的解决方法
Sep 18 Javascript
基于canvas实现手写签名(vue)
May 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
在Windows下编译适用于PHP 5.2.12及5.2.13的eAccelerator.dll(附下载)
2010/05/04 PHP
一篇有意思的技术文章php介绍篇
2010/10/26 PHP
php验证手机号码(支持归属地查询及编码为UTF8)
2013/02/01 PHP
精美漂亮的php分页类代码
2013/04/02 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
经典PHP加密解密函数Authcode()修复版代码
2015/04/05 PHP
如何实现php图片等比例缩放
2015/07/28 PHP
PHP生成短网址的思路以及实现方法的详解
2019/03/25 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
jQuery JSON实现无刷新三级联动实例探讨
2013/05/28 Javascript
Firefox和IE兼容性问题及解决方法总结
2013/10/08 Javascript
ES6新特性六:promise对象实例详解
2017/04/21 Javascript
深入理解JavaScript创建对象的多种方式以及优缺点
2017/06/01 Javascript
Vuex提升学习篇
2018/01/11 Javascript
vue.js与element-ui实现菜单树形结构的解决方法
2018/04/21 Javascript
jQuery基于闭包实现的显示与隐藏div功能示例
2018/06/09 jQuery
微信小程序中转义字符的处理方法
2019/03/28 Javascript
layui 弹出层回调获取弹出层数据的例子
2019/09/02 Javascript
Element Steps步骤条的使用方法
2020/07/26 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
python实现ipsec开权限实例
2014/11/11 Python
python列表操作实例
2015/01/14 Python
解决pip install的时候报错timed out的问题
2018/06/12 Python
TensorFlow实现模型评估
2018/09/07 Python
python 获取图片分辨率的方法
2019/01/08 Python
python对常见数据类型的遍历解析
2019/08/27 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
python 如何快速复制序列
2020/09/07 Python
CSS3 三维变形实现立体方块特效源码
2016/12/15 HTML / CSS
html5视频播放_动力节点Java学院整理
2017/07/13 HTML / CSS
乐高积木玩具美国官网:LEGO Shop US
2016/09/16 全球购物
阿迪达斯印度官方商城:adidas India
2017/03/26 全球购物
施华洛世奇美国官网:SWAROVSKI美国
2018/02/08 全球购物
什么是托管函数?托管函数有什么用?
2014/06/15 面试题
2014公司党员自我评价范文
2014/09/11 职场文书
如何利用JavaScript实现二叉搜索树
2021/04/02 Javascript