Javascript/Jquery——简单定时器-优快云博客

本文介绍了三种不同的网页定时器实现方案：使用setInterval进行间歇调用；利用setTimeout进行超时调用来递归更新时间显示；以及通过按钮控制的计时器实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种方法：

<%@ 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>