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 相关文章推荐
一个js的tab切换效果代码[代码分离]
Apr 11 Javascript
flexigrid 参数说明
Nov 23 Javascript
js左侧三级菜单导航实例代码
Sep 13 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
JavaScript中创建字典对象(dictionary)实例
Mar 31 Javascript
jQuery实现图片预加载效果
Nov 27 Javascript
JS/jQ实现免费获取手机验证码倒计时效果
Jun 13 Javascript
微信小程序 五星评分(包括半颗星评分)实例代码
Dec 14 Javascript
详解VUE 定义全局变量的几种实现方式
Jun 01 Javascript
封装微信小程序http拦截器过程解析
Aug 13 Javascript
Angular单元测试之事件触发的实现
Jan 20 Javascript
详解elementUI中input框无法输入的问题
Apr 27 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令牌 Token改进版
2008/07/18 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php使用指定字符列表生成随机字符串的方法
2015/04/18 PHP
PHP加密解密类实例代码
2016/07/20 PHP
PHP会员找回密码功能的简单实现
2016/09/05 PHP
JavaScript 异步调用框架 (Part 3 - 代码实现)
2009/08/04 Javascript
html数组字符串拼接的最快方法
2009/09/16 Javascript
js/jquery获取文本框输入焦点的方法
2014/03/04 Javascript
javascript移动设备Web开发中对touch事件的封装实例
2014/06/05 Javascript
jQuery中iframe的操作(点击按钮新增窗口)
2016/04/20 Javascript
AngularJS基础 ng-srcset 指令简单示例
2016/08/03 Javascript
js倒计时显示实例
2016/12/11 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
开发一个Parcel-vue脚手架工具(详细步骤)
2018/09/22 Javascript
简单说说angular.json文件的使用
2018/10/29 Javascript
微信小程序自定义toast组件的方法详解【含动画】
2019/05/11 Javascript
[00:47]DOTA2荣耀之路6:玩不了啦!
2018/05/30 DOTA
Python作用域用法实例详解
2016/03/15 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python使用wxpy轻松实现微信防撤回的方法
2019/02/21 Python
Python实现堡垒机模式下远程命令执行操作示例
2019/05/09 Python
Python代码生成视频的缩略图的实例讲解
2019/12/22 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
python实现密码强度校验
2020/03/18 Python
Python远程方法调用实现过程解析
2020/07/28 Python
python语言实现贪吃蛇游戏
2020/11/13 Python
CSS3 渐变(Gradients)之CSS3 线性渐变
2016/07/08 HTML / CSS
CSS3 中的@keyframes介绍
2014/09/02 HTML / CSS
HTML5 贪吃蛇游戏实现思路及源代码
2013/09/03 HTML / CSS
Html5实现二维码扫描并解析
2016/01/20 HTML / CSS
矫正人员思想汇报
2014/01/08 职场文书
大队干部竞选演讲稿
2014/04/28 职场文书
建筑专业毕业生求职信
2014/09/30 职场文书
购房委托书
2014/10/15 职场文书
展览会邀请函
2015/02/02 职场文书