JavaScript今日份学习

最新推荐文章于 2023-01-15 13:49:32 发布

贝多芬的芬

最新推荐文章于 2023-01-15 13:49:32 发布

阅读量150

点赞数

分类专栏： Web 文章标签： j js冒泡 js移动框 js入门 js垃圾

本文链接：https://blog.csdn.net/qq_39460362/article/details/96637447

版权

Web 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

模仿某度的登录

首先要了解鼠标的位置，client是用来记录键盘的位置坐标，clientX就是x轴，clientY也就是y轴。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>鼠标位置</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#box1{
				height: 100px;
				background-color: orange;
			}
			#box2{
				height: 200px;
				margin-top: 50px;
				background-color: red;
			}
		</style>
	</head>
	<body>
		<div id="box1"></div>
		<div id="box2"></div>
		<script type="text/javascript">
			var oBox1 = document.getElementById('box1')
			var oBox2 = document.getElementById('box2')
			oBox1.onclick = function(ev){
				var ev = ev || event
				console.log("X轴:",ev.clientX,"Y轴:",ev.clientY)
			}
			oBox2.onclick = function(ev){
				var ev = ev || event
				console.log("X轴:",ev.clientX,"Y轴:",ev.clientY)
			}
		</script>
	</body>
</html>

然后就是进行了解某度的登录的拖拽原理，里面用到了一个新的知识，offsetLeft这个是用来记录浏览器和内容的距离的长度。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>拖拽原理</title>
		<style type="text/css">
			#box{
				height: 200px;
				width: 200px;
				position: absolute;
				background-color: red;
				top: 0;
				left: 0;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script type="text/javascript">
			var oBox = document.getElementById('box')
			oBox.onclick = function(){
				console.log(oBox.offsetLeft,oBox.offsetTop)
			}
		</script>
	</body>
</html>

这里我加的定位absolute 然后内容都设置的为0，故此打印出来的坐标内容也是0,0。

然后下面就开始某度的表演！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				height: 200px;
				width: 200px;
				position: absolute;
				background-color: red;
				top: 100px;
				left: 100px;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<script type="text/javascript">
			var oBox = document.getElementById('box')
			//鼠标按下触发
			oBox.onmousedown = function(ev){
				var ev = ev || event
				var difx = ev.clientX - oBox.offsetLeft
				var dify = ev.clientY - oBox.offsetTop
//				console.log("difx:",difx,"dify:",dify)
				//移动鼠标 移动鼠标触发
				oBox.onmousemove = function(ev){
					var ev = ev || event
					console.log(ev.clientX,difx,ev.clientY,dify)
					var oBox_left = ev.clientX - difx
					var oBox_top = ev.clientY - dify
					console.log(oBox_left,oBox_top)
					oBox.style.top = oBox_top + "px"
					oBox.style.left = oBox_left + "px"
				}
				//抬起鼠标触发
				oBox.onmouseup = function(){
					//让box不动 清空上面的元素
					oBox.onmousemove = null
				}
			}
		</script>
	</body>
</html>

首先这里用到了三个鼠标事件，onmousedown这是鼠标按下时触发的事件；onmousemove这是鼠标移动的时候触发的事件；

onmouseup 这个是鼠标抬起的时候触发的事件。然后开始var 新建函数首先定义一个ev的函数，这个函数的功能是可以解决兼容性的问题，然后下面的difx是记录鼠标位置X轴减去盒子和浏览器距离的值，下面函数也是同上。

这个就是上面那个函数的原理，1是offsetLeft，2是clientX鼠标的坐标值。

然后下面就开始鼠标移动时触发的内容了，定义两个新的函数，然后用鼠标的坐标减去那个值，然后给style进行赋值就好了。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>keycode</title>
		<style type="text/css">
			#box{
				height: 100px;
				width: 100px;
				background-color: red;
				position: absolute;
			}
		</style>
	</head>
	<body>
		<div id="box"></div>
		<!--让键盘去控制div的方向-->
		<script type="text/javascript">
			var oBox = document.getElementById('box')
			var x = 0
			var y = 0
			document.onkeyup = function(ev){
				//获取 w--87  s---83  a---65  d---68 的值
				var ev = ev || event
				console.log(ev.keyCode)
				switch(ev.keyCode){
					case 87:
					//往上移动
						y -= 20
						break
					case 83:
					//往下移动
						y += 20
						break
					case 65:
					//往左移动
						x -= 20
						break
					case 68:
					//往右移动
						x += 20
						break
				}
				console.log(x,y)
				oBox.style.top = y + "px"
				oBox.style.left = x +  "px"
			}
		</script>
	</body>
</html>

这个是简单的，keycode也就是键盘码的操作，用的技术含量不多。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件冒泡</title>
		<style type="text/css">
			#box1{
				height: 300px;
				width: 300px;
				background-color: red;
				margin: 0 auto;
			}
			#box2{
				height: 200px;
				width: 200px;
				background-color: green;
				margin: 0 auto;
			}
			#box3{
				height: 100px;
				width: 100px;
				background-color: brown;
				margin: 0 auto;
			}
		</style>
	</head>
	<body>
		<div id="box1">
			box1
			<div id="box2">
				box2
				<div id="box3">box3
				</div>
			</div>
		</div>
		<script type="text/javascript">
			var oBox1 = document.getElementById('box1')
			var oBox2 = document.getElementById('box2')
			var oBox3 = document.getElementById('box3')
			function fn1(){
				alert(this.id)
			}
			oBox1.onclick = fn1;
			oBox2.onclick = fn1;
			oBox3.onclick = fn1;
		</script>
	</body>
</html>

什么是事件冒泡？

DOM中，树状结构决定了子元素肯定在父元素里，所以点击子元素，就同时点击了子元素和父元素，以及父元素的父元素，以此类推，当然最终的根节点都是文档，以及window。

试想，当一个子元素被点击的时候，不仅仅这个元素本身被点击了，因为这个元素也在其上一级父元素中(属于父级元素的地盘)，所以相当于其父元素也被点击了，以此类推，一层一层往外推，最终整个文档也是被点击了，如果每个层级的节点元素都绑定了click事件，那么每个节点的click事件函数都会被执行。举个形象的例子，一个村里的人被打了（click），首先就要按照村里的规矩处理，同时这个村属于某个乡镇，当然也是相当于这个乡镇的人被打了，那么也要按照这个乡镇的规矩处理，以此一层一层往上报。这个例子不准确的地方就是，现实中一个人因为一个事件只会被处理一次，不会因为同一件事情多次处理。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>事件冒泡的影响</title>
		<style type="text/css">
			#box{
				height: 200px;
				width: 200px;
				background-color: orange;
				display: none;
			}
		</style>
	</head>
	<body>
		<button id="btn">显示</button>
		<div id="box"></div>
		<script type="text/javascript">
			var oBox = document.getElementById('box')
			var oBtn = document.getElementById('btn')
			oBtn.onclick = function(){
				oBox.style.display = "block"
			}
		</script>
	</body>
</html>

windows是顶级的函数，所以会阻止这个。

贝多芬的芬

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript今日份学习

模仿某度的登录首先要了解鼠标的位置，client是用来记录键盘的位置坐标，clientX就是x轴，clientY也就是y轴。<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>鼠标位置</title> <style type="t...
复制链接

扫一扫