前端基础学习之js-setInterval（定时器）、setTimeout（一次性定时器）

最新推荐文章于 2024-06-21 08:42:30 发布

Endless Daydream233

最新推荐文章于 2024-06-21 08:42:30 发布

阅读量622

点赞数

分类专栏：常用js 前端学习基础记录文章标签： javascript html

本文链接：https://blog.csdn.net/gua222/article/details/108317083

版权

前端学习基础记录同时被 2 个专栏收录

57 篇文章 7 订阅

订阅专栏

常用js

16 篇文章 0 订阅

订阅专栏

1.setInterval()和clearInterval()

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

setInterval(code,millisec[,“lang”])
clearInterval(id_of_setinterval)

2.setTimeout()和clearTimeout()

setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式。只执行一次。
clearTimeout() 方法可取消由 setTimeout() 方法设置的 timeout。

setTimeout(code,millisec)
clearTimeout(id_of_settimeout)

3.案例

案例1：模仿网页小广告动起来~

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			position: absolute;
		}
		div img{
			width: 200px;
			height: auto;
		}
	</style>
</head>
<body>
<input type="button" value="动起来" id="btn1">
<input type="button" value="停下来" id="btn2">
	<div id="dv">
		<img src="img/images/大蛇丸.jpg" alt="">
		<img src="img/images/卡卡西.jpg" alt="">
	</div>
<script>
let intervalId=null;
document.getElementById("btn1").onclick=function () {
	intervalId=setInterval(function () {
	//点击调用定时器 给div随机的left值和top值
	let leftV=parseInt(Math.random()*100+1);
	let topV=parseInt(Math.random()*100+1);
	document.getElementById("dv").style.left=leftV+"px";
	document.getElementById("dv").style.top=topV+"px";
	},100)
	
}
document.getElementById("btn2").onclick=function () {
	console.log("我停下来了吗")
	clearInterval(intervalId);
}
</script>	
</body>
</html>

案例2：星星落下~

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 600px;
			height: 600px;
			background-color: #000;
			border:2px solid yellow;
			margin-top: 10px;
			position: relative;
		}
		div span{
			position: absolute;
			color: yellow;
		}
	</style>
</head>
<body>
<input type="button" value="看星星啦" id="btn">
<div id="dv"></div>
<script>
document.getElementById("btn").onclick=function () {
	setInterval(function () {
		document.getElementById("dv").innerHTML="<span>★</span>";
		let leftV=parseInt(Math.random()*600+1);
		let topV=parseInt(Math.random()*600+1);
		document.getElementById("dv").firstElementChild.style.top=topV+"px";
		document.getElementById("dv").firstElementChild.style.left=leftV+"px";	
	},10)
	
}
</script>
</body>
</html>

案例3：协议禁止点击倒数~

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
<textarea name="mytext" id="mytext" cols="30" rows="10">
	春有百花秋有月，
	夏有凉风冬有雪。
	若无闲事挂心头，
	便是人间好时节。
</textarea>
<br />
<input type="button" value="请阅读协议(5)" id="btn" disabled>
<script>
function my$(id) {
	return document.getElementById(id);
}
//使用定时器
let timer=5;
let timerId=setInterval(function () {
	timer--;
	my$("btn").value="请阅读协议("+timer+")";
	if(timer<=0){
		clearInterval(timerId);
		my$("btn").disabled=false;
		my$("btn").value="同意";
	}

},1000)
</script>
</body>
</html>

案例4：div背景渐变

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			width: 300px;
			height: 300px;
			background-color: hotpink;
		}
	</style>
</head>
<body>
<div id="dv"></div>
<input type="button" value="点击渐变" id="btn">
<script>
 function my$(id) {
	return document.getElementById(id);
}
my$("btn").onclick=function () {
	//点击设置div的opacity值由1-0
	//通过定时器每隔一段时间减0.1
	//由于js 处理小数的时候会丢失精度 因此先把opacity 值 由1*10
	let opacity=10;
	let timerId=setInterval(function () {
		opacity--
		if(opacity <=0){
			clearInterval(timerId);
		}
		my$("dv").style.opacity=opacity/10;
	},200)
}
</script>
</body>
</html>

案例5：div变宽

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div{
			margin-top: 20px;
			width: 200px;
			height: 150px;
			background-color: pink;
			border-radius: 100px;
		}
	</style>
</head>
<body>
<input type="button" value="巴拉巴拉变宽！" id="btn">
<div id="dv"></div>
<script>
 function my$(id) {
	return document.getElementById(id);
}
my$("btn").onclick=function () {
	let width=200;
	let timerId=setInterval(function () {
		width+=10;
		if(width>=900){
			clearInterval(timerId);
		}
		my$("dv").style.width=width+"px";
	},100)
}
</script>
</body>
</html>

案例6：移动元素

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	*{
		margin:0;
		padding:0;

	}
		div{
			width: 200px;
			height: 200px;
			background-color: pink;
			margin-top: 20px;
			position: absolute;
			left: 0;
		}
		#btn1{
			margin-right: 20px;
			margin-left: 20px;
			padding: 5px;
		}
		#btn2{
			padding: 5px
		}
	</style>
</head>
<body>
	<input type="button" value="移动400" id="btn1">
	<input type="button" value="移动800" id="btn2">
	<div id="dv"></div>
<script>
//元素样式代码写在style标签内的，外部无法访问，即用element.style.left 是无法获取当前元素left值的；
//元素样式代码写在style属性内的，外部可以访问 这时用element.style.left 可以获取当前元素的left值
//在这里用element.offsetLeft 无论样式代码写在标签内还是属性内，都可以获取到
function my$(id) {
	return document.getElementById(id);
}
	//点击按钮1移到400px
my$("btn1").onclick=function () {
	animate(my$("dv"),400);
}
	//点击按钮2移动到800px
my$("btn2").onclick=function () {
	animate(my$("dv"),800);
}

//设置任意元素移动到指定的位置

function animate(element,target) {
	
	//在调用定时器之前，先清除一遍定时器
	clearInterval(element.timeId)
	element.timeId=setInterval(function () {

		//先获取当前元素的left值
		let current=element.offsetLeft;
		//设置每次的移动像素--步数
		let step=10;
		//判断当前的元素left值和目标值的大小，若比目标值大，也就是得从右往左走，即step需为负数
		step=current<target?step:-step;
		current+=step;
		//只要目标值和当前值之间的距离大于步数，即可以一直给当前元素赋值
		//而如果小于步数，即一步到位
		if(Math.abs(target-current)>Math.abs(step)){
			element.style.left=current+"px";
		}else{
			clearInterval(element.timeId);
			element.style.left=target+"px";
		}
	},20)
}
</script>
</body>
</html>