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 遮罩层实现(mask)实现代码
Jan 09 Javascript
JS getStyle获取最终样式函数代码
Apr 01 Javascript
关于javascript中this关键字(翻译+自我理解)
Oct 20 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
javascript数组克隆简单实现方法
Dec 16 Javascript
canvas学习之API整理笔记(一)
Dec 29 Javascript
关于定制FileField中的上传文件名称问题
Aug 22 Javascript
探索webpack模块及webpack3新特性
Sep 18 Javascript
深入理解Vuex 模块化(module)
Sep 26 Javascript
详解React 在服务端渲染的实现
Nov 16 Javascript
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
js实现内置计时器
Dec 16 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编程开发“虚拟域名”系统
2006/10/09 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
php之curl实现http与https请求的方法
2014/10/21 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
PHP实现正则表达式分组捕获操作示例
2018/02/03 PHP
JavaScript中使用ActiveXObject操作本地文件夹的方法
2014/03/28 Javascript
跟我学习javascript的函数和函数表达式
2015/11/16 Javascript
基于JavaScript短信验证码如何实现
2016/01/24 Javascript
JavaScript获取对象在页面中位置坐标的方法
2016/02/03 Javascript
Bootstrap教程JS插件滚动监听学习笔记分享
2016/05/18 Javascript
深入浅析javascript中的作用域(推荐)
2016/07/19 Javascript
vue + socket.io实现一个简易聊天室示例代码
2017/03/06 Javascript
vue-axios使用详解
2017/05/10 Javascript
Nodejs之http的表单提交
2017/07/07 NodeJs
jquery easyui如何实现格式化列
2017/07/30 jQuery
JS去掉字符串中所有的逗号
2017/10/18 Javascript
微信小程序实现图片压缩功能
2018/01/26 Javascript
JS实现的缓冲运动效果示例
2018/04/30 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
2018/08/24 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
python数据结构树和二叉树简介
2014/04/29 Python
python实现的一个p2p文件传输实例
2014/06/04 Python
Python实现字符串逆序输出功能示例
2017/06/24 Python
Python获取网段内ping通IP的方法
2019/01/31 Python
深入了解Django中间件及其方法
2019/07/26 Python
python list多级排序知识点总结
2019/10/23 Python
python中id函数运行方式
2020/07/03 Python
使用PyCharm安装pytest及requests的问题
2020/07/31 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
创造美妙香氛体验:Aera扩散器和香水
2018/11/25 全球购物
员工自我鉴定范文
2013/10/06 职场文书
大学生求职自我评价
2014/01/16 职场文书
公司业务员岗位职责
2014/03/18 职场文书
法人代表身份证明书及授权委托书
2014/09/16 职场文书
2014年全国爱牙日宣传活动方案
2014/09/21 职场文书
Python列表的索引与切片
2022/04/07 Python