定时器：setTimeout&setIntervel

最新推荐文章于 2022-09-29 12:02:43 发布

haohao_zhang

最新推荐文章于 2022-09-29 12:02:43 发布

阅读量237

点赞数

本文链接：https://blog.csdn.net/haohao_zhang/article/details/117191287

版权

定时器：setTimeout()&setIntervel()

setTimeout(函数，时间)：

在载入后，延迟多长时间去执行一次函数或计算表达式，只会执行一次，使用cleanTimeout()清除；

倒计时

<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<input type="text" id="time" class="times"/>
		<input type="button" id="btn" value="倒计时开始" onclick="okh()"/>
		<script type="text/javascript">
			var time=5;
			var inter;
			function okh(){
				document.getElementById("time").value=time;
				console.log(time);
				time--;
				inter = setTimeout('okh()',1000);
				if(time<0){
					clearTimeout(inter);
				}
			}
		</script>
	</body>
</html>

setIntervel(函数，时间)：

在载入后，每隔指定的时间执行一次函数或计算表达式，同时会产生一个值，使用cleanIntervel()清除，清除掉数值循环结束；

括号内函数写法：可以使用setTimeout/setIntervel(“fun()”,time)或者setTimeout/setIntervel(fun,time)；

倒计时

	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text" id="time">
		<input type="button" id="btn" value="点击" />
		<script>
			var time=5;
			var inter;
			document.getElementById("btn").onclick=function(){
				var t=5;
				document.getElementById("time").value=t;
				clearInterval(inter);
				inter=setInterval('fun()',1000);
				time=t;
			}
			function fun(){
				time--;
				if(time<=0){
					clearInterval(inter);
				}
				document.getElementById("time").value=time;
				
			}
		</script>
	</body>
</html>
entById("time").value=time;
				
			}
		</script>
	</body>
</html>