原生JavaScript之dom与setInterval/settimeout结合实现动画

爱吃巧克li

已于 2023-11-22 09:56:29 修改

阅读量114

点赞数

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

于 2023-09-07 11:26:28 首次发布

本文链接：https://blog.csdn.net/lplovewjm/article/details/132733471

版权

JavaScript 专栏收录该内容

43 篇文章 2 订阅

订阅专栏

原生JavaScript之dom与setInterval/settimeout结合实现动画

动画效果如何实现

动画效果如何实现

在这里插入图片描述

那么好,这次我们要讲解的就是利用dom事件和定时方法来实现一个简单的动画效果.

实现这个效果,一共分为三个步骤:
1.实现效果
2.实现点击切换位置
3.实现动画效果

样式

两个div,一个父div,一个子div,用position+relative+absolute定位实现左上角效果,两个按钮

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container {
				width: 300px;
				height: 300px;
				background-color: blue;
				position: relative;
			}

			#content {
				width: 50px;
				height: 50px;
				background-color: red;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="content"></div>
		</div>
		<button onclick="dianji()">setTimeout</button>
		<button onclick="jidian()">setInterval</button>
	</body>
</html>

dom切换位置

切换位置本质就是切换position的样式,用到的方法就是

document.getElementById("id").style.left='content'

		<style>
			#container {
				width: 300px;
				height: 300px;
				background-color: blue;
				position: relative;
			}

			#content {
				width: 50px;
				height: 50px;
				background-color: red;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
<body>
		<div id="container">
			<div id="content"></div>
		</div>
		<button onclick="dianji()">setTimeout</button>
		<button onclick="jidian()">setInterval</button>
		<script>
			function dianji(){
				document.getElementById('content').style.left='250px'
				document.getElementById('content').style.top='250px'
			}
		</script>
</body>

当点击的时候,我们通过dom文档对象的id的style来改变具体的样式,这里我们改的是absolute中的left和top.

定时器实现动态移动位置

setTimeout实现

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container {
				width: 300px;
				height: 300px;
				background-color: blue;
				position: relative;
			}

			#content {
				width: 50px;
				height: 50px;
				background-color: red;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="content"></div>
		</div>
		<button onclick="dianji()">setTimeout</button>
		<button onclick="jidian()">setInterval</button>
		<script>
			let temp=0
			function dianji(){
				temp+=1;
				setTimeout(()=>{
					if(temp==1){
						document.getElementById('content').style.left=0
						document.getElementById('content').style.top=0
					}
					if(temp<=250){
						document.getElementById('content').style.left=temp+'px'
						document.getElementById('content').style.top=temp+'px'
						dianji()
					}else{
						temp=0;
						clearTimeout(temp)
					}
				},5)
			}
		</script>
	</body>
</html>

setInterval定时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			#container {
				width: 300px;
				height: 300px;
				background-color: blue;
				position: relative;
			}

			#content {
				width: 50px;
				height: 50px;
				background-color: red;
				position: absolute;
				left: 0;
				top: 0;
			}
		</style>
	</head>
	<body>
		<div id="container">
			<div id="content"></div>
		</div>
		<button onclick="dianji()">setTimeout</button>
		<button onclick="jidian()">setInterval</button>
		<script>
			let temp = 0

			function dianji() {
				temp += 1;
				setTimeout(() => {
					if (temp <= 250) {
						document.getElementById('content').style.left = temp + 'px'
						document.getElementById('content').style.top = temp + 'px'
						dianji()
					} else {
						temp = 0;
						clearTimeout(temp)
					}
				}, 5)
			}

			function jidian() {
				let id = setInterval(frame, 5)

				function frame() {
					temp += 1;
					if (temp <= 250) {
						document.getElementById('content').style.left = temp + 'px'
						document.getElementById('content').style.top = temp + 'px'
					} else {
						temp = 0
						clearInterval(id)
					}
				}
			}
		</script>
	</body>
</html>

爱吃巧克li

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
原生JavaScript之dom与setInterval/settimeout结合实现动画

那么好,这次我们要讲解的就是利用dom事件和定时方法来实现一个简单的动画效果.实现这个效果,一共分为三个步骤:1.实现效果2.实现点击切换位置3.实现动画效果。
复制链接

扫一扫