一个按钮控制定时器的开始与暂停

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>一个按钮控制定时器的开始与暂停</title><script type="text/javascript">var intervalId;var i = 0;var count = 0;function startTime() {var hour = document.getElementById("hour");var minute = document.getElementById("minute");var second = document.getElementById("second");var ms = document.getElementById("ms");var buttonEle = document.getElementById("start");if (i % 2 == 0) {buttonEle.innerHTML = "暂停计时";intervalId = setInterval(function() {count += 1;var thehour = parseInt(count / 360000);var theminute = parseInt(count / 6000 % 60);var thesecond = parseInt(count / 100 % 60);var thems = parseInt(count % 100);if (thehour >= 10) {hour.innerHTML = thehour + " ";} else {hour.innerHTML = "0" + thehour + " ";}if (theminute >= 10) {minute.innerHTML = theminute + " ";} else {minute.innerHTML = "0" + theminute + " ";}if (thesecond >= 10) {second.innerHTML = thesecond + " ";} else {second.innerHTML = "0" + thesecond + "  ";}if (thems >= 10) {ms.innerHTML = thems + "&nbsp;";} else {ms.innerHTML = "0" + thems + "&nbsp;";}}, 10)} else {buttonEle.innerHTML = "开始计时";clearInterval(intervalId);}i++;}</script><style type="text/css">body,html {background: violet;/*position: relative;*/}#firstDiv {height: 50%;width: 50%;position: absolute;margin-left: 350px;margin-top: 150px;background: #ffcccc;}#twoDiv {height: 200px;width: 100%;position: absolute;margin-top: 130px;margin-left: 130px;;}span {font-size: 30px;}button {font-size: 20px;}</style>
</head><body><div id="firstDiv"><div id="twoDiv"><span><span id="hour">00&nbsp;</span>时</span><span><span id="minute">00&nbsp;</span>分</span><span><span id="second">00&nbsp;</span>秒</span><span><span id="ms">00&nbsp;</span>毫秒</span><button id="start" onclick="startTime()">开始计时</button></div></div>
</body></html>

三、注

案例不分大小，有想法的小伙伴可以优化结构布局，重新封装函数，或者增加更多有趣的功能，如重置按钮、分段计时等。

标签：JavaScript，定时器

更多演示案例，查看 案例演示

欢迎评论留言!

一个按钮控制定时器的开始与暂停相关推荐

【JavaScript】一个按钮实现setInterval开始与暂停
html: <!DOCTYPE html> <html lang="en"> <head><meta charset="UTF- ...
js实现在页面实时显示时间，一个按钮控制时间暂停和开始
js实现在html实时显示时间,一个按钮控制时间暂停和开始.代码如下: <head><meta charset="UTF-8"><title>& ...
matlab gui设计一个按钮两个功能（开始和暂停）
matlab 设计Gui界面,想通过一个按钮实现两个通功能,点一下是开始,再点击一下是暂停,再再点击又是开始要求:开始按钮,点击之后,程序开始运行,此时按钮变为暂停按钮再次点击,程序暂停,按钮变为 ...
如果你需要对对话框上的一个按钮进行鼠标停靠提示
如果你需要对对话框上的一个按钮进行鼠标停靠提示,那么这么做: 1. 在这个对话框的定义部分添加黑体部分: class CMyDlg : public CDialog { -- CToolTi ...
解题代码用jquery控制一个按钮当一次点击完之后5 秒后才能继续点击验证码的制作...
解题代码用jquery控制一个按钮当一次点击完之后5 秒后才能继续点击复制验证码的制作转载于:https://www.cnblogs.com/yaomengli/p/6927630.html
一个按钮触发两个事件可以吗？
问: 我想让一个按钮触发两个事件,submit1_click 和submit2_click()可以吗?怎么设?先执行submit1_click,再接着执行submit2_click.是再OnClick ...
Unity 3D 2019.3.12版本创建一个按钮，并为该按钮添加点击Click的消息响应函数以及点击按钮切换场景
1. 创建一个GameObject对象菜单[GameObject]选择[Create Empty],此时可在[Hierarchy]窗口看到生成的GameObject对象,并且[Inspector]窗 ...
js一个按钮弹出两个按钮_没有电位器，用两个按钮可以实现变频器调速吗？
若你我之间有缘,关注作者又何妨? 两情若是久长时,又岂在朝朝暮暮. 大家好!我是江郎,一个勤奋好学的维修工. 江郎是做数控维修的,会和各种各样的电器元件打交道,所以,需要多多积累各种知识,发文也不会局 ...
ListView自定义视图中对Button按钮实现仅允许一个按钮处于开启状态
2019独角兽企业重金招聘Python工程师标准>>> Android项目迭代,之前使用下拉框Spinner被替换成ListView,相应的实现也比之前更加复杂了,根据美工给出的界面 ...
wxWidgets：编写一个应用程序 - 添加一个按钮
wxWidgets:编写一个应用程序 - 添加一个按钮 wxWidgets:编写一个应用程序 - 添加一个按钮 wxWidgets:编写一个应用程序 - 添加一个按钮感谢您阅读本教程至少到此为止.在 ...

一个按钮控制定时器的开始与暂停

目录

内容介绍

一、效果图

二、实现代码

三、注

一个按钮控制定时器的开始与暂停相关推荐

最新文章

热门文章