JS定时器及定时器案例（附完整代码）

风起携月归

于 2024-07-15 16:14:38 发布

阅读量418

点赞数 21

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/yjp1240201821/article/details/140356652

版权

JS定时器及定时器案例（附完整代码）

一、setTimeout定时器

1、理解： setTimeout 函数用于在指定的时间后执行一次特定的代码。

2、代码格式：

setTimeout(function() {
    // 在指定时间后执行的代码
}, 1000); // 延迟1秒后执行

3、取消定时器：

使用预定义函数：clearTimeout(timeout);来取消定时器

4、完整代码：（图片地址需自己修改）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="fun()">取消定时器</button>
		<br />
		<img src="../img/乔巴.png" width="100px" height="100px"/>
		<script type="text/javascript">
			var img = document.getElementsByTagName("img")[0];
			//5000毫秒后触发定时器内的函数
			var timeout = setTimeout(function(){
				img.setAttribute("src","../img/歌姬.jpeg");
				img.setAttribute("width","200px");
				img.setAttribute("height","200px");
			},5000);
			function fun(){
				clearTimeout(timeout);
			}
		</script>
	</body>
</html>

代码效果：

在这里插入图片描述

二、 setInterval 定时器

1、理解： setInterval 函数用于每隔指定的时间重复执行特定的代码。

2、代码格式：

setInterval(function() {
    // 每隔指定时间执行的代码
}, 2000); // 每隔2秒执行一次

3、取消定时器

使用预定义函数：clearInterval(interval);来取消定时器。

4、每5秒在控制台打印文本

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<button onclick="fun()">取消定时器</button>
		<script type="text/javascript">
		//每过5000毫秒都触发定时器内的函数
		var interval=setInterval(function(){
			console.log("憨憨小雷");
		},5000);
		function fun(){
			clearInterval(interval);
		}
		</script>
	</body>
</html>

代码效果：

在这里插入图片描述

三、注册成功后页面自动跳转案例

1、直接上源码（setInterval）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			span{
				color: red;
			}
		</style>
	</head>
	<body>
		<h1>注册成功，<span>3</span>秒后跳转到<a href="http://www.baidu.com">百度页面</a></h1>
		<script type="text/javascript">
			var span = document.getElementsByTagName("span")[0];
			setInterval(function(){
				var v = span.innerText;
				if (v>1) {
					v--;
					span.innerText=v;
				} else{
					window.location="http://www.baidu.com";
				}
			},1000);
		</script>
	</body>
</html>

2、代码效果: 该页面加载后，将显示注册成功的信息，并在span元素中显示"3"，然后每隔1秒将倒计时数字减少直至1，最后跳转到百度页面。

效果截图：

在这里插入图片描述

四、GIF动图案例

1、直接上源码（setInterval）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<img src="../img/乔巴.png" width="100px" height="100px"/>
		
		<script type="text/javascript">
			
			var img = document.getElementsByTagName("img")[0];
			var imgPath = ["../img/路飞.jpg","../img/歌姬.jpeg","../img/乔巴.png"];
			var index = 0;
			
			setInterval(function(){
				img.setAttribute("src",imgPath[index]);
				index++;
				if(index == imgPath.length){
					index = 0;
				}
				
			},1000);
		</script>
	</body>
</html>