首页手记使用setTimeout()方法实现计时器

使用setTimeout()方法实现计时器

标签：

JavaScript

这篇文章介绍一下如何通过setTimeout()方法实现计时器，原理很简单，笔者通过这篇文章，也顺便梳理一下自己的知识。
超时调用需要使用window对象的setTimeout()方法，它接受两个参数：要执行的代码和以毫秒表示的时间。——摘录自《JavaScript高级程序设计》
先附上html部分的代码，很简单，只是一个文本框表单。

<form>
<input type="text" id="count" />
</form>

要想实现计时器，原理很简单，就是让文本框中的数字每隔一秒增加1就好了。通过document.getElementById("count").value可以获取文本框的数值，进而也可以为其赋值。我们先介绍一下第一种方法。

<head>
<script type="text/javascript">
  var num=0;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;  
    setTimeout("startCount()",1000);
  }
    setTimeout("startCount()",1000);
</script>
</head>

怎么样，原理很简单吧，脚本中最后一行之所以要对函数startCount做超时调用，是因为，如果立即调用，即把这一行代码替换成startCount()的话，因为脚本是添加在head标签内，而调用函数的时候，body标签内部的代码还没有加载完，解析器找不到id为conut的元素，也就无法为文本框赋值了。
那么是不是只能超时调用呢？很显然不是，接下来就是第二种方法。

<head>
<script type="text/javascript">
  var num=0;
  window.onload=startCount;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;
    setTimeout("startCount()",1000); 
  }
</script>
</head>

既然刚刚的方式body标签内部的代码还没有加载完，那么等页面加载完再执行函数不就ok了？所以这里通过window.onload=startCount也可以实现功能。
那么，最终的第三种方法，相信不用我说大家也都知道了，就是将脚本代码从head标签中转移到body标签内的底部，即等页面元素都加载完成之后再执行脚本。

<body>
<form>
<input type="text" id="count" />
</form>
<script type="text/javascript">
  var num=0;
  function startCount() {
    document.getElementById('count').value=num;
    num=num+1;  
    setTimeout("startCount()",1000);
  }
   startCount();
</script>
</body>

其实并不是三种方法[破涕为笑]，只是各自实现形式略微有些差异，希望能给和我一样的新手们带来启发，同时也当做对自己学习的检验和知识的梳理。

点击查看更多内容