Javascript/Jquery——简单定时器的多种实现方法

第一种方法:

  

复制代码 代码如下:

  <%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html>

  <head>

  <title>定时器</title>

  <script language="javascript" src="jquery-1.4.2.js"></script>

  <script language="javascript">

  //使用setInterval间歇调用 (不建议使用该方法)

  $(function(){

  setInterval(function(){

  $("#currentTime").text(new Date().toLocaleString());

  },1000);

  });

  </script>

  </head>

  <body>

  <div id="currentTime"></div>

  </body>

  </html>

  第二种方法:

  

复制代码 代码如下:

  <%@ page language="java" contentType="text/html; charset=UTF-8"

  pageEncoding="UTF-8"%>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <head>

  <title>定时器</title>

  <script language="javascript" src="jquery-1.4.2.js"></script>

  <script language="javascript">

  //使用setTimeout超时调用

  function startTime(){

  $("#currentTime").text(new Date().toLocaleString());

  setTimeout('startTime()',1000);

  }

  </script>

  </head>

  <body onload="startTime()">

  <div id="currentTime"></div>

  </body>

  </html>

  第三种方法:

  

复制代码 代码如下:

  <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <head>

  <title>定时器</title>

  <script type="text/javascript">

  var c=0;

  var t;

  function timedCount(){

  document.getElementById('txt').value=c;

  c=c+1;

  t=setTimeout("timedCount()",1000);

  }

  function stopCount(){

  clearTimeout(t);

  }

  </script>

  </head>

  <body>

  <form>

  <input type="button" value="开始计时!" onclick="timedCount()"/>

  <input type="text" id="txt"/>

  <input type="button" value="停止计时!" onclick="stopCount()"/>

  </form>

  </body>

  </html>