javascript实现计时器的简单方法


Posted in Javascript onFebruary 21, 2016

计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器.

计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面.

javascript实现计时器的简单方法

那现在我们来完成这个界面

<label>计时:</label> 
<input type="text" name="" id="timer"/> 
<button onclick="pause(this)" id="pause" state="on">暂停</button>
<button onclick="restart()">重新开始</button>

给标签元素一个ID是为了获取其中的标签, 然后加入了两个点击事件, 计数器的暂停, 和重新开始事件.

首先我们来完成开始计时的处理, 开始计时主要还是是用了setInterval的方法, 其中每隔1秒执行一次方法, 这样我们就可以对时间做处理, 就像开头所说60秒等于1分钟..., 所以这里就需要用判断来处理, 最后就将其中的得到的秒,分,时显示到输入框里.

var ele_timer = document.getElementById("timer");
var n_sec = 0; //秒
var n_min = 0; //分
var n_hour = 0; //时

//60秒 === 1分
//60分 === 1小时
function timer() {
 return setInterval(function () {

 var str_sec = n_sec;
 var str_min = n_min;
 var str_hour = n_hour;
 if ( n_sec < 10) {
  str_sec = "0" + n_sec;
 }
 if ( n_min < 10 ) {
  str_min = "0" + n_min;
 }

 if ( n_hour < 10 ) {
  str_hour = "0" + n_hour;
 }

 var time = str_hour + ":" + str_min + ":" + str_sec;
 ele_timer.value = time;
 n_sec++;
 if (n_sec > 59){
  n_sec = 0;
  n_min++;
 }
 if (n_min > 59) {
  n_sec = 0;
  n_hour++;
 }


 }, 1000);
}

var n_timer = timer();

我们用timer方法包装setInterval方法是为了,后面暂停和重新开始做处理.
用户点击了暂停, 计时器就停止计时, 用户继续点击这个按钮, 计时器继续计时. 所以这里有一个状态需要控制,这个状态我们给这个按钮一个属性.

//暂停和继续
function pause(self) {
 var state = self.getAttribute("state");
 if (state === "on") {
  clearInterval(n_timer);
  self.textContent = "继续";
  self.setAttribute("state", "off");
 } else {
  n_timer = timer();
  self.textContent = "暂停";
  self.setAttribute("state", "on");
 }
}

最后我们来看一下重新开始, 重新开始事件就更加简单了. 将计数器清0, 然后改变暂停按钮初始状态.

function restart() {
 clearInterval(n_timer);
 n_sec = 0;
 n_min = 0;
 n_hour = 0;
 n_timer = timer();

 var ele_pause = document.getElementById("pause");
 ele_pause.textContent = "暂停";
 ele_pause.setAttribute("state", "on");
}

这样就完成了计时的功能.效果如下

javascript实现计时器的简单方法

希望本文所述对大家学习javascript程序设计有所帮助。

Javascript 相关文章推荐
Javascript isArray 数组类型检测函数
Oct 08 Javascript
js jquery ajax的几种用法总结(及优缺点介绍)
Jan 28 Javascript
jQuery截取指定长度字符串代码
Aug 21 Javascript
JavaScript中for循环的使用详解
Jun 03 Javascript
javascript 判断两个日期之差的示例代码
Sep 05 Javascript
jquery实现简单Tab切换菜单效果
Jul 17 Javascript
bootstrap css样式之表单
Jan 19 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
解决vue点击控制单个样式的问题
Sep 05 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
VUE-cli3使用 svg-sprite-loader
Oct 20 Javascript
vue elementui form表单验证的实现
Nov 11 Javascript
JS中Eval解析JSON字符串的一个小问题
Feb 21 #Javascript
浏览器检测JS代码(兼容目前各大主流浏览器)
Feb 21 #Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
Feb 21 #Javascript
全面详细的jQuery常见开发技巧手册
Feb 21 #Javascript
完善的jquery处理机制
Feb 21 #Javascript
jquery对象和DOM对象的任意相互转换
Feb 21 #Javascript
jQuery实现div拖拽效果实例分析
Feb 20 #Javascript
You might like
一次编写,随处运行
2006/10/09 PHP
笑谈配置,使用Smarty技术
2007/01/04 PHP
php使用fopen创建utf8编码文件的方法
2014/10/31 PHP
thinkPHP框架实现的短信接口验证码功能示例
2018/06/20 PHP
弹出广告特效代码(一个IP只弹出一次)
2007/05/11 Javascript
一段利用WSH修改和查看IP配置的代码
2008/05/11 Javascript
基于jquery的设置页面文本框 只能输入数字的实现代码
2011/04/19 Javascript
JS构建页面的DOM节点结构的实现代码
2011/12/09 Javascript
jquery表单验证使用插件formValidator
2012/11/10 Javascript
查询json的数据结构的8种方式简介
2014/03/10 Javascript
Dojo Javascript 编程规范 规范自己的JavaScript书写
2014/10/26 Javascript
javascript比较两个日期的先后示例代码
2014/12/31 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
angularjs 源码解析之injector
2016/08/22 Javascript
javascript设置文本框光标的方法实例小结
2016/11/04 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
vue中使用WX-JSSDK的两种方法(推荐)
2020/01/18 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
2020/11/19 Vue.js
Python使用matplotlib绘制动画的方法
2015/05/20 Python
Python实现合并字典的方法
2015/07/07 Python
Python OpenCV实现图片上输出中文
2018/01/22 Python
Python paramiko模块的使用示例
2018/04/11 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
python3实现从kafka获取数据,并解析为json格式,写入到mysql中
2019/12/23 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
html5基础标签(html5视频标签 html5新标签用法)
2013/12/30 HTML / CSS
Myprotein葡萄牙官方网站:英国优质运动营养品牌
2016/09/12 全球购物
工程测量与监理专业应届生求职信
2013/11/27 职场文书
《红军不怕远征难》教学反思
2014/04/14 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
校园安全主题班会
2015/08/12 职场文书
Nginx工作原理和优化总结。
2021/04/02 Servers