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 相关文章推荐
JQuery 图片延迟加载并等比缩放插件
Nov 09 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
Jan 11 Javascript
Javascript改变CSS样式(局部和全局)
Dec 18 Javascript
JavaScript中逗号运算符介绍及使用示例
Mar 13 Javascript
浅谈JavaScript中变量和函数声明的提升
Aug 09 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
Sep 20 Javascript
jQuery Easyui 下拉树组件combotree
Dec 16 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
Angular组件化管理实现方法分析
Mar 17 Javascript
JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码
Sep 23 jQuery
ES6 javascript中class类的get与set用法实例分析
Oct 30 Javascript
手机浏览器唤起微信分享(JS)
Oct 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
关于php内存不够用的快速解决方法
2013/10/26 PHP
php实现无限级分类(递归方法)
2015/08/06 PHP
php实现图片上传并利用ImageMagick生成缩略图
2016/03/14 PHP
PHP去除空数组且数组键名重置的讲解
2019/02/28 PHP
js function定义函数使用心得
2010/04/15 Javascript
基于jQuery实现点击同时更改两个iframe的网址
2010/07/01 Javascript
分享20款美化网站的 jQuery Lightbox 灯箱插件
2014/10/10 Javascript
Javascript this 关键字 详解
2014/10/22 Javascript
node.js中的dns.getServers方法使用说明
2014/12/08 Javascript
js对象的复制继承实例
2015/01/10 Javascript
使用JavaScript制作一个简单的计数器的方法
2015/07/07 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
2015/08/05 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
AngularJS实现按钮提示与点击变色效果
2016/09/07 Javascript
如何使用Vuex+Vue.js构建单页应用
2016/10/27 Javascript
微信小程序  Mustache语法详细介绍
2016/10/27 Javascript
jquery 判断是否支持Placeholder属性的方法
2017/02/07 Javascript
NodeJs的fs读写删除移动监听
2017/04/28 NodeJs
Vuex modules模式下mapState/mapMutations的操作实例
2019/10/17 Javascript
[04:02]DOTA2上海特锦赛小组赛第二日recap精彩回顾
2016/02/28 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python正则表达式匹配日期与时间的方法
2019/07/07 Python
python3.7将代码打包成exe程序并添加图标的方法
2019/10/11 Python
python用quad、dblquad实现一维二维积分的实例详解
2019/11/20 Python
h5页面背景图很长要有滚动条滑动效果的实现
2021/01/27 HTML / CSS
美国在线印刷公司:PsPrint
2017/10/12 全球购物
ORLY官网:美国专业美甲一线品牌
2019/12/11 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
大整数数相乘的问题
2012/07/22 面试题
大学生自我评价怎样写好
2013/10/23 职场文书
项目总经理岗位职责
2014/02/14 职场文书
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
政府门卫岗位职责
2014/04/29 职场文书
法律专业求职信
2014/05/24 职场文书
运动会200米广播稿
2015/08/19 职场文书
纯CSS实现酷炫的霓虹灯效果
2021/04/13 HTML / CSS