JavaScript 制作的一个秒表记录器（小玩具）

最新推荐文章于 2020-04-01 12:08:56 发布
最新推荐文章于 2020-04-01 12:08:56 发布
阅读量242 收藏
点赞数
分类专栏： JavaScript 文章标签： js JavaScript 秒表 计时器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/pigsohappy/article/details/96996771
版权

导语

  今天分享一个用JavaScript制作的一个秒表记录器

代码

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<div id="timer">00:00:00</div>
		<div id="listBox">记录时间：
			<ul id="list"></ul>
		</div>
		<button type="button" id="start" onclick="startStopTime()">开始/暂停</button>
		<button type="button" id="stop" onclick="getTime()">秒记</button>
		<button type="button" id="end" onclick="refushTime()">重置</button>
	</body>
	<script type="text/javascript">
		// 计时器
			var timer = document.getElementById('timer');
			var start = document.getElementById('start');
			var stop = document.getElementById('stop');
			var end = document.getElementById('end');
			var sec = 0;
			var mis = 0;
			var min = 0;
			var bool = false;
			var int;
			// 启动暂停
			function startStopTime(){
				if(bool == false){
					int = setInterval(beginTime,10);
					bool = true;
				}else{
					window.clearInterval(int);
					bool = false;
				}
			}
			// 计时工具
			function beginTime(){
				mis = mis + 1;
				if(mis > 99){
					 mis = 0;
					sec = sec + 1;
				}
				if(sec > 59){
					 sec = 0;
					min =  min + 1;
				}
				if(min > 23){
					 min = 0;
				}
				
				timer.innerHTML = (min < 10 ? "0" + min :min) + ":" +(sec < 10 ? "0" + sec :sec) + ":" + (mis < 10 ? "0" + mis :mis);
			}
			// 重置时间
			function refushTime(){
				window.clearInterval(int);
				mis = 0;
				min = 0;
				sec = 0;
				timer.innerHTML =  (min < 10 ? "0" + min :min) + ":" +(sec < 10 ? "0" + sec :sec) + ":" + (mis < 10 ? "0" + mis :mis);
				bool = false;
				var list = document.getElementById("list");
				var li = document.getElementById("list").childNodes;
				var i = li.length；
				for(var i = li.length-1;i>=0;i--){
					list.removeChild(li[i]);
				}
			}

			// 秒记功能
			function getTime(){
				var li = document.getElementById('list');
				var newLi = document.createElement("li");
				var t = document.getElementById('timer').textContent;
				var i = document.getElementById("list").children.length + 1;
				if(i <= 10){
					var a = i++;
					newLi.innerHTML = a + ".    " +  t ;
					li.appendChild(newLi);
				}else{
					alert("前十已经产生咯")
				}
			}
	</script>
</html>

代码有不足还望大佬指出，分享到这结束了！

无厘琛
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
使用js做一个简单的秒表计时
becauseof_11的博客
08-16 4375
我们平时登录网页也许会遇到不久之后网页会自动提示您开启了多久这样的界面，那么这就关系到秒表计算的问题了，我们来看看简单秒表是如何做成的，下面来分析一下实现秒表的过程： 首先第一步肯定是分别获取时分秒 第二步就是将它们都置0  第三步就是运用计时器，即setInterval(function(),num)这个函数,里面的num就是你希望执行的速度了 过程解释清楚了，那么具体代码是如何实现的呢
web基于js实现动态秒表小游戏
陈乐乐的博客
05-16 1033
测试你的动作反应时间。使用Javascript脚本语言制作一个动态秒表，当秒表计时到10秒的时候，按下键盘的空格键，记录按下键盘时刻秒表与10秒时刻的时间差，并按照时间差从小到大顺序进行排名。 <%@page contentType="text/html;charset=gb2312"%> <%@page import="java.sql.*"%> <!DOCTYPE...
js实现简单的秒表
weixin_45253306的博客
04-01 276
思路： 使用定时器setInterval（,10）每一毫秒进行一次计数存储在一个变量中，通过将该变量取余、计算得到秒、分、时等，再将这些数据动态的显示。设置三个按钮：第一个按钮包含有开始、暂停和继续功能，第二个按钮是记录时间，第三个按钮用来重置时间。 代码： <div id="tim"></div> <button id="startAndPause">...
JS秒表（代码实现）
qq_44024359的博客
09-19 1013
JS代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <head> <script> function timedText(){ var x=document.getEleme...
网页秒表 - version0.zip
08-07
网页秒表 说明：用html5和JavaScript写的，可以直接用浏览器打开使用，不需要有网络，也不需要安装。 模仿windows10闹钟里的秒表写的，可以计次（分段间隔时长）、记录总时长、记录每次分段的开始时刻，可以修改秒表的名称如：工作、学习、听单词。没有csdn下载积分的请去pudn搜“网页秒表”。
javascript实现秒表计时器的制作方法
10-20
在JavaScript中，制作一个秒表计时器是常见的任务，通常用于游戏、测试或任何需要实时计时的场景。下面我们将详细讨论如何使用JavaScript实现秒表计时器，以及在给定的代码示例中涉及的关键知识点。 首先，秒表计时...
javascript设计简单的秒表计时器
10-23
在JavaScript中，设计一个简单的秒表计时器涉及到的核心概念有事件监听、DOM操作、定时器（setTimeout和clearTimeout）以及动态更新界面。下面我们将详细探讨这些知识点。 1. **事件监听**： 在这个秒表计时器中，...
javascript实现一款好看的秒表计时器
10-14
在本文中，我们将探讨如何使用JavaScript实现一个美观的秒表计时器。首先，我们需要了解JavaScript中的基本计时原理和事件处理，以便实现所需的功能。 1. **计时原理**： JavaScript提供了`setInterval()`函数，它...
JavaScript实现秒表
10-12
在本文中，我们将深入探讨如何使用JavaScript实现一个功能完备的秒表，包括开始、记录、暂停和重置等核心功能。 首先，我们需要创建一个HTML页面作为我们的秒表界面。`秒表.html`文件将会包含一个用于显示时间的...
js实现简易计时器
12-29
自己实现的简单的倒计时器，发现网上关于这方面的代码有是有，但写的界面都不堪入目，乱七八糟的。我自己用js手写了一个分享给大家，界面比较简洁，后面会再写一个比较酷炫的。如果没有积分还想下载的小伙伴可以加qq邮箱联系我，我发给你：1343121616@qq.com
秒表计时器设计,java程序设计
01-03
本程序采用NetBeans IDE工具开发，实现了以毫秒为单位的计时器，直接运行该项目文件下dist文件夹中的miaobiao.jar执行文件即可操作该程序。通过使用NetBeans提供的控件，该程序能同时记录三组时间，且能记录的最长时间高达24小时。计时器计时功能的控制用到了Date类和Timer类，为了让所做的图形界面程序通过事件响应机制实现用户与程序的交互，通过在按钮单击事件里添加一个监控对象，然后使用接口对象的方法来完成相应事件的处理。本程序中还定义了2个一般的类，用数学方法计算角度，实现秒表、时钟的走动，这2个类都用到了类的继承关系、线程的使用。该程序外观简洁自然，使用者能很容易理解该如何操作，还比较实用
解决 js 方法中时间差和顺序带来的影响
YKenan的博客
11-15 171
解决 js 方法中时间差和顺序带来的影响1. 原因2. 解决思想 1. 原因 js 的记载顺序是从上到下的, 由于执行的时间不一定, 故执行完的顺序就不一定了, 然而这样会带来许多麻烦 2. 解决思想 1. 函数嵌套调用 2. 用 setTimeout 函数 3. 用判定变量 以上三种方法可以解决几乎所有的 js 方法中时间差和顺序带来的影响 ...
用js写一个小秒表
努力做一名会做饭的程序员
02-15 359
用js写一个小秒表 复制直接可用 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>日期,制作秒表</title> <style> .clock{ width:300px; height: 50px; ...
js秒表制作
weixin_45000814的博客
03-29 321
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document&l...
JAVASCRIPT(js)简单动态秒表程序设计代码
j_kikihiQ的博客
03-06 1274
js计时器 .clock{ width: 100px; height: 25px; background: #000; color: #0f0; font-weight: bold; border-radius: 50px; text-align: center; line-height: 25px; } 停止 开始 //获取时间函数
原生js代码实现秒表效果
weixin_33769207的博客
05-19 200
jQuery用的多了，逐渐忘记了原生js如何书写代码。今天看到一个面试题，利用原生js写一个计算鼠标移入某个区域所停留的时长，移出暂停，再次移入累加。 于是想到了，利用原生js实现一个秒表效果。做之前也搜索了一些秒表效果，是利用setTimeout()实现的。本文是利用setInterval()定时器实现的。 html代码如下： <div&g...
教你用JS手写简单的秒表（精确到10ms，没有延迟）
明月如霜丶
10-24 3096
制作秒表的思路如下： 1、首先定出功能以及界面。 我的目的是做最简单的秒表，因此只需要开始、结束以及清零的功能。界面如下图所示： 未开始运行： 运行中：　　 2、构思实现的方式。 首先，核心方法肯定是 setInterval() 方法，用于周期性地显示时间。 因为我要精确到10ms， 所以设置时间间隔为10。 再者，如何令时间递增？ A . 我开始想到的是设置变量 milliSeconds、sec...
基于卷积神经网络的食物识别及实现.pdf
最新发布
07-22
在超市无人结算服务中，使用电子标签对部分货物如水果、蔬菜等进行结算的成本过高、便捷性不高，至今依然采用人工结算的方式。 针对这一问题，本文提出了基于卷积神经网络的食物识别方法。 通过自建水果数据集来训练卷积神经网络分类模型；基于训练后的模型构建可视化平台进行食物识别。 实验结果表明，利用卷积神经网络的食物识别的预测准确率 为 ９６．３４％。
使用JavaScript制作一个简单的加法器
04-01
使用JavaScript制作一个简单的加法器可以通过以下步骤实现： 1. 创建一个HTML文件，并在文件中添加一个输入框和一个按钮，用于输入两个数字和执行加法操作。 ```html <!DOCTYPE html> <html> <head> <title>加法器</title> </head> <body> <input type="number" id="num1" placeholder="请输入第一个数字"> <input type="number" id="num2" placeholder="请输入第二个数字"> <button onclick="add()">相加</button> <p id="result"></p> <script src="script.js"></script> </body> </html> ``` 2. 创建一个JavaScript文件（例如script.js），并在文件中编写加法函数和事件处理函数。 ```javascript function add() { // 获取输入框中的数字 var num1 = parseInt(document.getElementById("num1").value); var num2 = parseInt(document.getElementById("num2").value); // 执行加法操作 var sum = num1 + num2; // 显示结果 document.getElementById("result").innerHTML = "结果：" + sum; } ``` 3. 在浏览器中打开HTML文件，输入两个数字，点击按钮即可执行加法操作并显示结果。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值