javascript基础-定时器

最新推荐文章于 2025-03-27 21:30:21 发布

原创最新推荐文章于 2025-03-27 21:30:21 发布 · 316 阅读

0 ·

CC 4.0 BY-SA版权

本文介绍了JavaScript中的定时器函数，包括setTimeout()和setInterval()的使用方法，并通过两个实例展示了如何实现系统时间显示及倒计时功能。

定时器是用以指定在一段特定的时间后执行某段程序。常用的定时器函数有以下几个：

setTimeout()：定时器

clearTimeout()：终止定时器

setInterval()：设置定时器

clearInterval()：取消使用setInterval()设置的定时器

（1）系统时间向后走10秒即停止

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
   var num=0;
   var time;
   function loadDate(){
	    var d=new Date();
		var year=d.getYear();
		var month=d.getMonth()+1;
		var day=d.getDay()+1;
		var hours=d.getHours();
		var minutes=d.getMinutes();
		var seconds=d.getSeconds();
		var t=year+"/"+month+"/"+day+" "+hours+":"+minutes+":"+seconds;
		var sp=document.getElementById("date");
		sp.innerText=t;
		num++;
		if(num==10){
			clearTimeout(time);
			}
	   }
	   time=setInterval(loadDate,1000);
</script>
</head>

<body onload="loadDate()">
    <span id="date"></span>
</body>
</html>

（2）倒计时

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
	<script>
		var timmerID = null; 
		function time() { 
		var time = document.getElementById("now"); 
		var left = document.getElementById("left"); 
		time.value=parseInt(time.value)+1; 
		left.value = parseInt(left.value)-1; 
		if(left.value==0){ 
		mystop(); 
		alert("时间已到！"); 
		} 
		} 
		function mystart() { 
		var left = document.getElementById("left"); 
		left.value="10"; 
		timmerID = window.setInterval("time()", 1000); 
		} 
		function mystop() { 
		window.clearInterval(timmerID); 
		} 
    </script>
</head>

<body>
时间起点：<input type="text" name="now" id="now" value="0"/><input type="button" value="开始" onclick="mystart();"><br> 
剩余时间：<input type="text" name="left" id="left" value="10" disabled="disabled"/>秒<br> 
</body>
</html>