js实现秒表功能

最新推荐文章于 2022-02-05 23:48:10 发布
最新推荐文章于 2022-02-05 23:48:10 发布
阅读量1.1k 收藏 3
点赞数 1
文章标签： js实现秒表
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44649228/article/details/87018840
版权

实现秒表功能，有开始计时,停止计时
<1>点击【开始】,开始计时,按钮变成【暂停】
<2>点击【暂停】,暂停计时,按钮变成【开始】
<3>在次点击【开始】,接着上一次计时的数开始计时
<4>点击暂停,【暂停】变成【开始】,计时暂停
详细代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{margin: 0;padding: 0;}
			#div1{width: 400px;height: 300px;background: #eee;margin: 100px auto;text-align: center;overflow: hidden;}
			#div2{width: 200px;height: 50px;margin: 50px auto;background: #fff;border: 1px solid;line-height: 50px;}
			button{display: block;margin: 50px auto;width: 100px;height: 30px;background: #999;}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var oDiv1 = document.getElementById('div1');
				var oDiv2 = document.getElementById('div2');
				var aSpan = oDiv2.getElementsByTagName('span');
				var aBtn = oDiv1.getElementsByTagName('button');
				var con = 0;
				var timer = null;
				aBtn[0].onclick = function(){
					if(aBtn[0].innerHTML == '开始'){
						aBtn[0].innerHTML = '暂停'
						timer = setInterval(function(){
							con++;
							aSpan[0].innerHTML = parseInt(con / 3600);
							aSpan[1].innerHTML = parseInt(con / 60) % 60;
							aSpan[2].innerHTML = con % 60;
							for(var i = 0; i < aSpan.length; i++){
								if(parseInt(aSpan[i].innerHTML) < 10){
									aSpan[i].innerHTML = '0' + aSpan[i].innerHTML
								}
							}
						},1000)
					}else{
						clearInterval(timer);
						aBtn[0].innerHTML = '开始'
					}
						
				}
				aBtn[1].onclick = function(){
					clearInterval(timer);
					con = 0;
					aBtn[0].innerHTML = '开始'
					for(var i = 0; i < aSpan.length; i++){
							aSpan[i].innerHTML = '00';
					}
				}
					
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<span>00</span> :
				<span>00</span> :
				<span>00</span> </div>
			<button>开始</button>
			<button>复位</button>
		</div>
	</body>
</html>
幻期颐y
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javascript 秒表
liuhao9999的博客
09-28 320
【代码】javascript 秒表。
javascript实现的页面秒表
06-02
用JavaScript实现的秒表，按空格键运行和停止
秒表功能实现
weixin_30819085的博客
06-04 620
秒表要实现的功能描写叙述：下方灰色背景的view上有两个button-開始/停止button 和 计次button。点击開始button，中间的大时钟開始计时，这时点击计次button。右上角的小时钟会把此刻的瞬时时间记录下来。同一时候在以下的tableView上也会显示。点击停止button会把右上角的小时钟，中间的大时钟清零。同一时候，以下的tableView也会清空。 ...
原生js代码实现秒表效果
weixin_33769207的博客
05-19 200
jQuery用的多了，逐渐忘记了原生js如何书写代码。今天看到一个面试题，利用原生js写一个计算鼠标移入某个区域所停留的时长，移出暂停，再次移入累加。 于是想到了，利用原生js实现一个秒表效果。做之前也搜索了一些秒表效果，是利用setTimeout()实现的。本文是利用setInterval()定时器实现的。 html代码如下： <div&g...
JavaScript--秒表
weixin_46048542的博客
02-05 474
秒表.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <titl
js实现计时器秒表功能
01-19
本文实例为大家分享了js实现计时器秒表功能的具体代码，供大家参考，具体内容如下 HTML <input type=text id=timetext value=00:00:00 readonly> <button type=button onclick=start()>开始</button...
原生js实现秒表计时器功能
12-11
本文实例为大家分享了带有开始、暂停、清除功能的js计时器，供大家参考，具体内容如下 效果图：   下面贴代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
Javascript实现秒表倒计时功能
12-29
本文实例为大家分享了js实现秒表倒计时的具体代码，供大家参考，具体内容如下 效果图： 代码： <html> <body> <span id=clock xss=removed>00:30:00:00 [removed] var oclock=document....
JavaScript实现秒表
10-12
接下来，我们编写JavaScript代码来实现秒表功能。在`秒表.js`文件中，我们将定义一个`Stopwatch`类，包含初始化、计时、暂停、继续和重置的方法。 ```javascript class Stopwatch { constructor() { this....
利用JavaScript实现秒表功能
ab_dk的博客
04-01 2681
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&lt...
JavaScript初学——秒表的实现
weixin_40615146的博客
01-24 656
该秒表功能精确至毫秒，顺带相当于完成之前完成的界面其中一个功能（该秒表并没有使用css布局），具体代码如下： &lt;body&gt; &lt;div id="con2"&gt; &lt;!-- 制作一个秒表/计时器 --&gt; &lt;h3 id="mytime"&gt;计时器&lt;/h3&gt;
秒针计时器 html,js实现秒表计时器
weixin_31147757的博客
06-15 653
本文实例为大家分享了js实现秒表计时器的具体代码，供大家参考，具体内容如下秒表计时器的实现：效果图如下：附代码，已调试运行Document#div1 {width: 300px;height: 400px;background: skyblue;margin: 100px auto;text-align: center;}#count {width: 200px;height: 150px;lin...
js实现简单的秒表
weixin_45253306的博客
04-01 276
思路： 使用定时器setInterval（,10）每一毫秒进行一次计数存储在一个变量中，通过将该变量取余、计算得到秒、分、时等，再将这些数据动态的显示。设置三个按钮：第一个按钮包含有开始、暂停和继续功能，第二个按钮是记录时间，第三个按钮用来重置时间。 代码： <div id="tim"></div> <button id="startAndPause">...
JS中秒表实现
qq_41039734的博客
06-10 409
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <script> setInterval(function () { time = new Date(); year = time.getFullY...
web前端必学功法之一：秒表实现
qq_42302014的博客
09-27 1245
web前端必学功法之一：秒表实现 功能案例： css样式： <style> .date{ width: 200px; height: 50px; background-color: black; border-radius: 20px; color: red; font-weight: bo
js计数、倒计时等使用
我的成长之路！
01-07 673
var c=0 var t function timedCount() { document.getElementById('txt').value=c c=c+1 t=setTimeout("timedCount()",1000) } function stopCount() { clearTimeout(t) }
JavaScript基础：秒表
用CSS3动画实现loading效果
08-08 191
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .A { width: 150px; height: 200px; border: solid...
秒表计时器
鹭鸶之飞的博客
02-15 411
Document div{margin-top:40px;margin-left:25px;margin-bottom:10px;width:20px;height:20px;} input{width:30px;height:30px;margin-left:20px;font-size:20px;color:#fff;background: #000;border:none;outli
stm32秒表功能实现
最新发布
11-20
以下是实现STM32秒表功能的步骤： 1. 首先，需要在STM32上配置定时器。定时器是STM32实现秒表功能的关键。可以使用STM32的TIM（定时器）模块来实现定时器的配置。可以使用CubeMX来配置TIM模块，也可以手动编写代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值