简单的计时器，秒表的实现。

现在每个人的手机上都有一个秒表。我呢，就给大家介绍一下秒表的简单实现原理。
一般秒表有一个显示时间的区域，还有三个键，开始、暂停、复位。
我给大家来介绍的秒表是把开始跟暂停和在一个按键上面的。
下面就是详细的步骤。
首先呢，需要一个容器装着‘显示器’，按键。秒表一般只有毫秒、秒、分。两个按键。
我们先要有一个记录总时间的i，还要有关闭计时器的开关。
打开计时器，打开计时器之前要先关闭一次计时器。打开计时器，因为计时器是100毫秒动一次。我们要对毫秒取整。
因为我们是开始暂停是一个键。添加点击事件，默认isRuning = false；是停止状态，按键为开始，关闭计时器。当为true为计时器开启状态。按键变为暂停调用计时器函数。
复位是一个单独键。点击时关闭计时器，暂停按键变为开始，时间设置为0。
下面是实现的代码。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style>#div1{width:300px;height: 200px;background:orange;margin:100px auto;text-align: center;padding-top:100px;}#div1 span{font-size: 20px;}#div1 #span3{font-size: 15px;color:blue;}</style><script>window.onload = function(){var i = 0;timer = null;function setIn(){clearInterval(timer);timer = setInterval(function(){                   i++;$('span3').innerHTML = i % 10;$('span2').innerHTML = Num(parseInt(i / 10) % 60);$('span1').innerHTML = Num(parseInt(i / 10 / 60));},100)}//开始//暂停// $('pause').onclick = function(){//    clearInterval(timer);// }//复位////var isRuning = false;$("start").onclick = function(){if(!isRuning){isRuning = true;$("start").innerHTML = '暂停';setIn()}else{isRuning = false;$("start").innerHTML = '开始';clearInterval(timer);}}$('reset').onclick = function(){i = 0;$('span3').innerHTML = '0';$('span2').innerHTML = '00';$('span1').innerHTML = '00';clearInterval(timer);$("start").innerHTML = '开始';isRuning = false;}}function $(id){return document.getElementById(id);}function Num(n){if(n >= 10){return n;}else{return "0" + n;}}</script>
</head>
<body><div id= "div1"><span id = "span1">00</span><span>:</span><span id = "span2">00</span><span>.</span><span id ="span3">0</span><br><button id ="start">开始</button><br><button id = "reset">复位</button></div>
</body>
</html>

简单的计时器，秒表的实现。相关推荐

【Time系列三】简单的计时器(秒表)
之前在 "for与while的洪荒之力" 中介绍到计时器,不过那样弄感觉好麻烦啊, 碰巧昨天学Java的时候,讲到求余可以用来求时间 ! for与while链接: http://w ...
03、三种简单的计时器
1.计时器在游戏中的使用次数很多,以下是三种简单的计时器写法 2.代码: 1 using System.Collections; 2 using System.Collections.Generic; ...
ios 简单的计时器游戏 NSUserDefaults NSDate NSTimer
2019独角兽企业重金招聘Python工程师标准>>> 1.NSUserDefaults是应用程序实现过程中只会存在单独一个的对象,故可以用它记录小型的数据如系统偏好设置等 2.初始 ...
java 秒表_JAVA计时器秒表程序代码
<JAVA计时器秒表程序代码>由会员分享,可在线阅读,更多相关<JAVA计时器秒表程序代码(7页珍藏版)>请在人人文库网上搜索. 1.Java计时器(秒表)功能:能实现计时,暂 ...
python实现一个简单的计时器
在python编程中,我们经常需要进行对代码的运行时间的基准测试,可以通过python编程写一个简单的计时器程序来实现这样一个过程. class Timer: #@save""&q ...
简单的Java秒表计时器（线程）
秒表的个个位数的计算: package Seconds;public class Watch_time extends Thread{int ms,ms_1,ms_2;int s,s_1;int m, ...
用C#做个简单的计时器（秒表功能）
先在窗口中加入一个计时器控件:(timer1)用于触发计时:一个Label控件:(bable1)用于显示时间:两个按钮:(btnStar)用于开始/停止计时,(btnClear)用于计时器清零. 声明 ...
简单的秒表计时器java报告_简单的Java秒表计时器（线程）
秒表的个个位数的计算: package Seconds; public class Watch_time extends Thread{ int ms,ms_1,ms_2; int s,s_1; in ...
简单的Java秒表计时器(线程),Java计时器使功能每分钟运行
I have an application where I need to access a webservice every minute. I was going to use a thread ...

简单的计时器，秒表的实现。

简单的计时器，秒表的实现。相关推荐

最新文章

热门文章