实现秒表功能 : 显示时,分,秒 , 点击按钮开始计时

最新推荐文章于 2024-05-15 02:26:47 发布
最新推荐文章于 2024-05-15 02:26:47 发布
阅读量6k 收藏 2
点赞数
分类专栏： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Endeavor_No1/article/details/77721641
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>practice3</title>
	</head>

	<body>
		<b>实现秒表功能 : 显示时,分,秒 , 点击按钮开始计时</b>
		<ul id="ul"></ul>
		<span id="hour">00</span><span>时</span>
		<span id="minute">00</span><span>分</span>
		<span id="second">00</span><span>秒</span><br />
		<button οnclick="start()">开始</button>
		<button οnclick="pause()">暂停</button>
		<button οnclick="recount()">重新计数</button>
		<script>
			var time;
			var hour = document.getElementById("hour");
			var minute = document.getElementById("minute");
			var second = document.getElementById("second");
				var i = 1;//一开始写在start里，多点几次的时候就有错误，所以写成全局了
				var j = 1;
				var k = 1;
			function start() {
				
				clearInterval(time);
				time = setInterval(change, 1000) //计时器

				function change() {
//					i++;
//					second.innerHTML=i;				
					if(i == 60) {
						i = 0;
						second.innerHTML = "00";
						i++;
						if(j == 60) {
							j = 0;
							minute.innerHTML = "00";
							j++;
							if(k == 60) {
								k = 0;
								hour.innerHTML = "00";
								k++;
							} else {
								if(k <= 9) {
									t1.innerHTML = "0" + k;
									k++;
								} else {
									hour.innerHTML = k;
									k++;
								}
							}//时
						} else {
							if(j <= 9) {
								minute.innerHTML = '0' + j;
								j++;
							} else {
								minute.innerHTML = j;
								j++;
							}
						}//分
					} else if(i <= 9) {
						second.innerHTML = '0' + i;
						i++;
					} else {
						second.innerHTML = i;
						i++;
					}//秒
				}//change函数
			} //开始，从中间开始扩散的看
			function pause(){
				clearInterval(time);
			}//暂停
			function recount(){
				 i = 1;
				 j = 1;
				 k = 1;//这个地方要重新赋值
				clearInterval(time);
				hour.innerHTML='00';
				minute.innerHTML='00';
				second.innerHTML='00';
				start();
			}//重算
			//点暂停，再点开始是继续
		</script>
	</body>

</html>
最近学的有点蒙，只能一点一点扣了。。。
慧、新
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
observer模式的简单实现
guang11cheng的专栏
09-22 607
// observer.h #ifndef OBSERVER_H_ #define OBSERVER_H_ #include using namespace std; class CAspect {     CAspect()     {
51单片机-定时器（简易时钟的实现）
热门推荐
cyaya6的博客
10-07 2万+
简易时钟的实现以及对定时器的总结
2024年最新Vue做的时间倒计时组件（精确到秒）(1)，Web前端开发面试技能介绍
最新发布
2401_84438654的博客
05-15 666
秋招即将开始，校招的朋友普遍是缺少项目经历的，所以底层逻辑，基础知识要掌握好！而一般的社招，更是神仙打架。特别强调，项目经历不可忽视；几乎简历上提到的项目都会被刨根问底，所以项目应用的技术要熟练，底层原理必须清楚。这里给大家提供一份汇集各大厂面试高频核心考点前端学习资料。涵盖HTML，CSS，JavaScript，HTTP，TCP协议，浏览器，Vue框架，算法等高频考点238道（含答案）！开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】高级前端工程师必备资料包},
Android应用生命周期实现简单的秒表App
qq_45974648的博客
11-11 3870
文章目录1、功能分析1.1、秒表功能界面1.2、App结构2、开发视图布局2.1、activity_main.xml2.2、string.xml3、Activity实现3.1、MainActivity类4、生命周期的应用4.1、问题分析4.2、Activity运行过程4.2、屏幕旋转，计时不重置4.3、App被切换至后台，秒表可以暂停5、MainActivity完整代码 1、功能分析 1.1、秒表功能界面 1.2、App结构 1个Activity ：MainActivity 1个Layout ：acti
react antd 自定义倒计时按钮组件
一只程序媛
03-04 899
父组件： import React, { useState, useEffect, useRef } from 'react'; import {Button} from 'antd'; // 控制按钮执行倒计时事件 const [toStart, settoStart] = useState(false); //组件使用 <Timebutton name={'命中详情'} num={4} onClick={() => { console.log('3333');
原生js实现秒表计时器功能
12-11
本文实例为大家分享了带有开始、暂停、清除功能的js计时器，供大家参考，具体内容如下 效果图：   下面贴代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
Java实现的计时器【秒表】功能示例
08-26
* 计时：计时器可以实时地显示当前的时间，精确到毫秒级别。 * 暂停：计时器可以暂停当前的计时操作，以便用户可以随时暂停或继续计时。 * 重置：计时器可以重置当前的时间为初始状态，以便用户可以重新开始计时。 ...
js实现计时器秒表功能
01-19
本文实例为大家分享了js实现计时器秒表功能的具体代码，供大家参考，具体内容如下 HTML <input type=text id=timetext value=00:00:00 readonly> <button type=button onclick=start()>开始</button...
使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）
11-20
- `oStart.onclick`: 开始按钮被点击时，调用`setTimeStr`函数开始计时，并启用暂停按钮，禁用开始和其他按钮。 - `oPause.onclick`: 暂停按钮被点击时，使用`clearInterval`清除定时器，禁用暂停按钮，启用继续和...
JS实现按钮控制计时开始和停止功能
10-19
给大家介绍了JS实现按钮控制计时开始和停止功能，代码简单易懂，非常不错，具有参考借鉴价值，需要的朋友参考下吧
单片机秒表课程设计 控制暂停以及复位清零
07-05
可以控制暂停以及复位清零，共打包两个程序，都很全面。随你选择，绝不雷同
React倒计时功能实现代码——解耦通用
10-14
主要介绍了React倒计时功能实现——解耦通用,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
精确到毫秒的秒表
05-20
本人用vb编的，希望有人可以用上（有需要代码的请与本人联系）
怎么实现秒表的功能？？有个按钮，一按开始计时，再按停止
luckymar的专栏
01-19 6896
怎么实现秒表的功能？？有个按钮，一按开始计时，再按停止。 public   class   StopWatch   extends   javax.swing.JFrame   {             private   TimerThread   timer   =   null;             /**   Creates   new   form   StopWatch  
数电实验：大作业：实现具有分、秒计时的计时器
wu-kan
07-03 1万+
数字电子技术实验报告 实验题目：计时器设计 实验报告 内容一 使用Protues和Basys3实验板实现具有分、秒计时的计数器，计数结果要求在7段数码管（7SEG-MPX4-CC-BLUE）上显示，并检查结果。 原理 用四片74LS90拼成两个60进制计数器分别表示分和秒，使用异步接法。扫描电路部分使用“扫描位置决定扫描内容”，使用4片选择器来选择74LS48中的BCD码，并用74LS138滚动扫...
antd的时间选择器 好难呀 先记下来
晴晴晴的博客
05-23 1万+
import React from 'react'; import { Modal, Button, Row, Col, DatePicker, Table, message, notification } from 'antd'; import './location.less'; import { connect } from 'dva'; import LocationDetailD fro...
【antd】倒计时组件
idwtwt的专栏
11-28 6749
在antd pro自带倒计时组件： import React, { Component } from 'react'; function fixedZero(val) { return val * 1 &lt; 10 ? `0${val}` : val; } const initTime = props =&gt; { let lastTime = 0; let targetTi...
用汇编语言设计一个基于51单片机的秒表计时器，实现如下功能：表示1小时59分59秒99分，秒计时器有两个按钮：启动/停止按钮、复位按钮
05-25
首先，需要明确一些变量的定义： - H：表示小时数，取值范围为0-23 - M：表示分钟数，取值范围为0-59 - S：表示秒数，取值范围为0-59 - MS：表示毫秒数，取值范围为0-99 - flag：表示秒表计时器的状态，0表示停止状态，1表示运行状态 然后，可以编写以下程序来实现秒表计时器的功能： ```assembly ORG 0 ; 从地址0开始存储程序 ; 变量定义 H DB 0 ; 小时数 M DB 0 ; 分钟数 S DB 0 ; 秒数 MS DB 0 ; 毫秒数 flag DB 0 ; 秒表计时器状态，0表示停止，1表示运行 ; 中断向量表 ORG 0CH ; 定时器0中断向量 TIMER0_ISR: PUSH ACC ; 保存现场 INC MS ; 每次中断毫秒数加1 CJNE MS, 99, SKIP1 ; 如果毫秒数不等于99，则跳过下一行 CLR MS ; 如果毫秒数等于99，则清零毫秒数 INC S ; 每满一秒钟，秒数加1 CJNE S, 60, SKIP2 ; 如果秒数不等于60，则跳过下一行 CLR S ; 如果秒数等于60，则清零秒数 INC M ; 每满一分钟，分钟数加1 CJNE M, 60, SKIP3 ; 如果分钟数不等于60，则跳过下一行 CLR M ; 如果分钟数等于60，则清零分钟数 INC H ; 每满一小时，小时数加1 CJNE H, 24, SKIP4 ; 如果小时数不等于24，则跳过下一行 CLR H ; 如果小时数等于24，则清零小时数 SKIP4: SKIP3: SKIP2: SKIP1: POP ACC ; 恢复现场 RETI ; 退出中断 ; 主程序 START: MOV A, #0FH ; 设置定时器0的计数模式为16位自动重装载 MOV TMOD, A MOV A, #18 ; 设置定时器0的计数值为65536-5000，即5000us中断一次 MOV TH0, A MOV TL0, A SETB ET0 ; 允许定时器0中断 SETB EA ; 允许总中断 LOOP: JNB P3.0, STOP ; 如果启动/停止按钮没有按下，则跳过下一行 CPL flag ; 切换秒表计时器状态 JB flag, START_COUNT ; 如果秒表计时器状态为1，则跳转到START_COUNT标签处 JMP STOP ; 如果秒表计时器状态为0，则跳转到STOP标签处 START_COUNT: SJMP LOOP ; 进入循环 STOP: JNB P3.1, RESET ; 如果复位按钮没有按下，则跳过下一行 MOV H, #0 ; 清零小时数 MOV M, #0 ; 清零分钟数 MOV S, #0 ; 清零秒数 MOV MS, #0 ; 清零毫秒数 SETB flag ; 停止秒表计时器 JMP LOOP ; 返回循环 RESET: JMP START ; 重启秒表计时器 END ; 程序结束 ``` 这段程序使用定时器0来产生5000us的定时中断，每次中断时将毫秒数加1，并判断是否满一秒钟、满一分钟、满一小时，如果是，则分别将秒数、分钟数、小时数加1，并清零毫秒数、秒数、分钟数、小时数。同时，在主程序中，通过判断启动/停止按钮和复位按钮是否被按下来控制秒表计时器的状态和数据的清零。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值