全部评论(1条)
-
- 严小华2009 2017-12-15 13:26:09
- 计时器, 在生活当中也是用得频繁的功能, 比如锻炼身体, 跑步比赛等等相关的活动. 我们用Javascript来完成一个计时器. 计时器, 主要就是对时间的一个逻辑处理, 比如60秒等于1分钟, 60分钟等于一个小时, 我们这里只做到小时的处理. 就这么一个简单的逻辑, 然后动态的显示在一个Input里面. 那现在我们来完成这个界面 <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分钟..., 所以这里就需要用判断来处理, Z后就将其中的得到的秒,分,时显示到输入框里. 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"); } } Z后我们来看一下重新开始, 重新开始事件就更加简单了. 将计数器清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"); } 这样就完成了计时的功能.效果如下
-
赞(9)
回复(0)
热门问答
- 怎样用javascript做一个计时器
2017-12-14 22:06:02
377
1
- 怎样用VB做一个秒表计时器
- 两个按钮,一个开始键 一个清零键 ,想要点击开始键以后 开始键变成 结束 文本也改成结束 按清零键后变回开始 还想添加一个开始的键盘快捷键(开始和结束能够公用这个快捷键) 求大神指教
2018-11-28 05:21:49
309
0
- javascript计时器何时关闭
2016-08-14 10:35:38
412
1
- javascript如何缓存计时器?
2017-10-08 01:03:35
340
1
- 怎么使javascript中的计时器设置停止
2012-11-11 16:57:06
403
4
- 用EXCEL中做一个计时器
- 点击“开始”键计时同时触发F9键,使得绿色单元格中产生随机数值,点击“结束”键停止计时,点击“重置”标签栏中时间清零,标签栏用于显示时间。请高手帮写下代码,谢谢!
2015-12-31 13:05:11
281
2
- 怎样做一个简易的一分钟计时器?
2018-01-22 10:22:01
425
1
- .net 如何在服务器端做一个计时器
- 我要在服务器算写一个计时器、每隔12小时去检索一下 数据库的内容 access 数据库 呵呵、有没有高手帮忙呀、 Z好把代码贴出来!
2010-09-05 02:41:22
416
3
- 怎样用手中的材料做一个砂石过滤器
2017-10-14 06:07:59
290
1
- 用vb的timer做一个计时器程序
- 包括开始、停止、重置,共3个按钮 计时单位精确到0.01秒 重置后,再按开始是从0开始重新计时的 计时中会溢出错误? 请高手写一下代码,特别是重置后,我自己做的时候不能重新从0开始计时,而是又接着停止时的时间继续下去!!!
2014-07-15 03:29:59
488
2
- 用javascript写一个计时器程序,有启动暂停和复位
2013-12-06 00:43:29
363
3
- 求做一个JAVASCRIPT器,能计算并显示到某一天的剩余时间。。。
- 比如做一个到2011.1.1剩余的时间。求注释。。。。在线等。。。
2010-12-18 19:23:03
300
1
- 怎样用一张圆形滤纸做一个简单的纸花?
2012-12-06 01:32:36
346
3
- 怎样用51单片机采集555计时器的频率?
2012-12-02 03:49:38
340
3
- 怎样用一个矿泉水瓶子与两根吸管做一个口吹喷雾器
2017-11-26 17:30:21
812
1
- 做一个一分钟计时器需要哪些材料,它的工作原理是什么?
2012-07-02 00:37:01
290
3
- javascript 如何发送modbus rtu 指令
- 有一个继电器,通过485转usb接在电脑上(客户机),客户机通过浏览器访问服务端,要根据服务端返回的不同数据给继电器发送不同的指令!现在的初步想法是从服务端返回一个json数据,根据json数据用javascript给继电器发送指令,但不知道如何实现!
2015-06-01 10:07:47
356
2
- 用打点计时器打纸带时怎样用逐差法求加速度?
2018-03-07 04:11:02
352
1
- 怎样用vb.net做毫秒计时器(有没有什么类似于ccrptmr之类的控件)
- 不知道为什么,ccrptmr在VB.net里不能用
2018-11-28 08:44:46
335
0
- arcgis server for javascript如何实现Z短路径分析
2016-07-09 00:19:16
366
2
参与评论
登录后参与评论