用javascript写计时器

用javascript写计时器的主要技术点很简单,就是在js脚本中设定一个时间变量,每隔一秒将变量值加一(变量的单位为秒),然后将该值换算成时:分:秒的形式写到制定的页面标签上就算完事。

本例中试用<span>标签来显示时间,打开页面就开始计时。用一个超链接来实现开始、暂停功能,(默认加载实现暂停功能)点击一次,改变显示的文字为(开始),在点击一次又变成暂停……

页面代码:

<span id="shijian">00:00:00</span><a id="switch" href="#" />暂停</a>

脚本代码如下:

<script type="text/javascript" >

var time;

var miaoshu;//累加的时间秒数

var start=false;//标识是继续还是暂停

function Change(miaoshu)//该方法用来将累加的秒数时间换算成要显示的形式并填充到知道的标签(此处为span)

  var hh=Math.floor(miaoshu / 3600);//计算小时部分

  if(hh<10) hh='0'+hh;

  var mm=Math.floor((miaoshu % 3600) / 60);//计算分钟部分

  if(mm<10) mm='0'+mm;

  var ss=Math.floor(miaoshu % 60);//计算秒数部分

  if(ss<10) ss='0'+ss;

  document.getElementById("shijian").innerHTML = hh + ':' + mm + ':' + ss;//将得到的结果显示到标签上。

//继续功能实现

function jx(){

  if(!start){

    time = setInterval("Change(miaoshu++)", 1000);

    start = true;

    document.getElementById("switch").html("暂停答题");
    document.getElementById("switch").click(function(){  //暂停后a标签的click函数将调用暂停方法
      zt();
    });

  }

}

function zt() {
  clearInterval(time);
  start = false;

  document.getElementById("switch").html("继续答题");
  document.getElementById("switch").click(function(){
    jx();
  });
}

主要的三个方法已经写完,可浏览的时候并没有开始计时,因为我们希望在页面一加载的时候就计时,所以需要在window.onload函数内调用jx()方法,方法体内调用了setInterval("Change(miaoshu++)", 1000);来实现累加并显示时间的功能,最后加上一句:

window.onload=function(){

  jx();

}

</script>

posted @ 2012-12-25 12:03  luseike  阅读(743)  评论(0)    收藏  举报