JavaScript实现元素移动

最新推荐文章于 2024-04-18 13:21:59 发布

#清词#

最新推荐文章于 2024-04-18 13:21:59 发布

阅读量308

点赞数

CC 4.0 BY-SA版权

分类专栏：笔记文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/qq_54998648/article/details/128376955

笔记专栏收录该内容

21 篇文章

订阅专栏

本文探讨了JavaScript在前端开发中的重要性，并介绍了React、Vue和Angular三大流行框架。JavaScript的jsx语法、Vue的数据绑定和Angular的MVC结构被详细阐述。最后，提供了一个简单的JavaScript实现元素移动的案例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引言

JavaScript是前端三剑客中最优秀,最核心的成分。通过JavaScript,网页不再是单一的静态页面,使得网页可以与用户进行交互,赋予了网页灵魂。

IT小知识

JavaScript的框架有很多,最流行的依然是React(Facebook公司退出),Vue(国产,尤雨溪推出),Angular(Chrome推出)。

React只关注视图层,使得编写用户交互代码时只需关注界面显示以及业务逻辑，其他部分都有React来完成。React中有着最为晦涩难懂的jsx(JavaScript And XML)语法，可以将html与JavaScript杂糅在一起，通过babel等解释渲染成DOM。
Vue是一个轻量级的构建用户界面的渐进式框架，在中小型项目中表现得十分出色。Vue有着强大的数据绑定流，通过视图模型实现视图与数据的传递，虚拟DOM实现界面的异步刷新。Vue学习成本低，易理解，尤其在uniapp等程序开发中应用广泛，使我们中国人的框架。
Angular是一个构建用户界面的MVC框架。React只关注视图层，而Vue是MVVM，那么Angular就是真正的MVC。Angular语法晦涩难懂，学习成本高，但是MVC使得整个App结构清晰，极大提高了开发效率。Angular的脏检查机制被React和Vue所沿用，是最为稳定、成熟的前端框架。

众多的前端框架归根到底还是JavaScript，深入了解JavaScript受益匪浅。

回归现实

一个小案例实现盒子的左右移动：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>div移动案例</title>
		<style type="text/css">
			#tar{
				width: 100px;
				height: 100px;
				background: darkturquoise;
				position: relative;/*相对定位,使得left属性有效*/
				left: 0;/*设置左间距,否则默认为auto*/
			}
		</style>
		
	</head>
	<body>
		<div id="tar"></div>
		<button id="triggerBtn">移动</button>
	</body>
</html>
<script type="text/javascript">
	let flag=true;
		document.getElementById('triggerBtn').addEventListener('click',function(){
			let elem=document.getElementById('tar');
			//定时间进行盒子的移动
			setInterval(()=>{	
				//获得盒子当前的左边距
			let curLeft=window.getComputedStyle(elem,null).left;
			//由于需要进行累加或者累减,将其转化为浮点型数据
			curLeft=parseFloat(curLeft);
			//盒子间距不越界,进行右移;否则左移回到原位
			if(curLeft<=1000&&flag)
			{
				elem.style.left=curLeft+3+'px';
			}
			else
			{
				elem.style.left=curLeft-3+'px';
				flag=false;
			}
			//盒子已经回到原位,再次右移
			if(curLeft<=0)
			{
				flag=true;
			}
		},10);
		})
		
</script>