站长网(Downzz.com)
站长网(Downzz.com)
当前位置:首页 > 站长教程 > 建站经验 > JS教程
JavaScript 秒表效果_时间日期
时间:2020-03-18 16:41:25 围观:428 来源:原创

分享一段代码,它利用JavaScript实现秒表效果,也就是每隔一秒数字加1。

代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.downzz.com/" />
<title>javascript实现的秒表效果-Downzz.com</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()函数不断递归调用startith函数,startith函数每运行一次增加一秒,然后判断秒、分是否大于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()参阅setTimeout()方法一章节。

(3).关于三元运算符参阅三元运算符用法一章节。

文章为作者独立观点不代表本网立场,未经允许不得转载。