你的位置:首页 > Java教程

[Java教程]javascript实现的秒表效果代码


javascript实现的秒表效果代码:
关于秒表效果,自然不会陌生,下面将分析一个实例来介绍一下如何通过原生javascript实现此效果。
代码如下:

<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /><title>javascript实现的秒表效果-蚂蚁部落</title> <style type="text/css"> #container{  margin:0 auto;  margin-top:10%;  width:200px; } #timer{  border:red double 1px;  width:180px;  height:76px;  line-height:76px;  font-size:32pt;  color:green; } input{  width:87px; } </style> <script type="text/javascript">window.onload=function(){ var ctrl=document.getElementById("ctrl");  var myreset=document.getElementById("myreset"); var timer=document.getElementById("timer"); init(timer,ctrl); myreset.setAttribute("onclick", "init(timer,ctrl)"); }var hour, minute, second;var t;var init=function(theTimer,TheCtrl){  theTimer.innerHTML="00:00:00";  hour=minute=second=0;  TheCtrl.setAttribute("value", "开始"); TheCtrl.setAttribute("onclick", "startit()");  clearTimeout(t); } function startit(){  second++;  if(second>=60){   second = 0;   minute++;  }  if(minute>=60){   minute = 0;   hour++;  }  timer.innerHTML=j(hour)+":"+j(minute)+":"+j(second);  ctrl.setAttribute("value", "暂停/停止");  ctrl.setAttribute("onclick", "pause()"); t=setTimeout("startit()", 1000); } var j = function(arg){  return arg>=10 ? arg : "0" + arg; } var pause = function(){  clearTimeout(t);  ctrl.setAttribute("onclick", "startit()");  ctrl.setAttribute("value", "继续"); } </script></head> <body> <div id="container">  <div id="timer"></div>  <input type="button" id="ctrl" />  <input type="reset" id="myreset"/></div> </body> </html> 

以上代码实现了秒表效果,下面就介绍一下此特效的实现过程:
一.实现原理:
原理比较简单,就是使用setTimeout()函数不断的递归调用startit()函数,此函数可以每运行一次增加一秒,然后判断秒、分是否大于60,如果大于则按照时间法则进行进位或者清零,最后再将当前时间值写入timer中,这样就实现了秒表效果,关于开始,暂停这里就不多介绍了,可以看参考代码注释。
二.代码注释:
1.window.onload=function(){},当文档内容完全加载完毕再去执行函数中的代码。
2.var ctrl=document.getElementById("ctrl"),获取id属性值为ctrl的对象元素。
3.var myreset=document.getElementById("myreset"),获取id属性值为myreset的对象元素。
4.var timer=document.getElementById("timer"),获取id属性值为timer的对象元素。
5.init(timer,ctrl),调用函数并传递参数执行。
6.myreset.setAttribute("onclick", "init(timer,ctrl)"),为重置按钮注册事件处理函数。
7.var hour, minute, second,声明三个变量,分别用来表示时间的小时、分钟和秒。
8.var t,声明一个变量用来存储setTimeout()函数的返回值。
9.var init=function(theTimer,TheCtrl){},声明一个函数用来初始化秒表效果,第一个参数是显示秒表效果的元素对象,第二个参数是开始按钮对象。
10.theTimer.innerHTML="00:00:00",将theTimer元素的内容设置为="00:00:00"。
11.hour=minute=second=0,将三个变量的值分别设置为0。
12.TheCtrl.setAttribute("value", "开始"),将开始按钮的value属性值设置为“开始”。
13.TheCtrl.setAttribute("onclick", "startit()"),为开始按钮注册onclick事件处理函数。
14.clearTimeout(t),停止setTimeout()函数的执行。
15.function startit(){},声明一个函数。
16.second++,秒加1.
17.if(second>=60),如果秒数大于等于60,则将second清零,并将minute加1。
18.timer.innerHTML=j(hour)+":"+j(minute)+":"+j(second),将timer的内容设置为当前的秒表值。
19.ctrl.setAttribute("value", "暂停/停止"),将开始按钮的value属性值设置为暂停/停止"。
20.ctrl.setAttribute("onclick", "pause()"),为开始按钮注册onclick事件处理函数。
21.t=setTimeout("startit()",1000),一秒后,再次调用startit()函数。
22.var j=function(arg){return arg>=10 ? arg : "0" + arg;},用于判断当前时间各单位的数值是否大于等于10,如果大于在使用原数值,如果不小于10,则在前面添加0,这是使用了三元运算符。
23.var pause = function(){},声明一个函数用于暂停秒表。
24.clearTimeout(t),停止setTimeout()函数的运行。
25.ctrl.setAttribute("onclick", "startit()"),为开始按钮注册onclick事件处理函数。
26.ctrl.setAttribute("value", "继续"),将开始按钮的value属性值设置为“继续”。
三.相关阅读:
1.setAttribute()函数可以参阅setAttribute()函数的用法详解一章节。
2.setTimeout()函数可以参阅window对象的setTimeout()方法一章节。
3.关于三元运算符可以参阅三元运算符用法详解一章节。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=8524

更多内容可以参阅:http://www.softwhy.com/javascript/