js获取鼠标的移动方向、速度

1.知识点

js基础、BOM、DOM、数组、html5、css3、回调函数

2.html+css3创建好前端页面

这里我使用了两种不同的方法：

html代码

<!-- 方法一 -->
		<div id="" class="option">
			<div onmousemove="option01()"  onmouseleave=" reset()" class="concainer">
				<p>方法一</p>
		    </div>
		    <div class="result">
				<div class="header">结果</div>
				<p id="result_speed">速度：0</p>
				<p id="result_distance">距离：0</p>
				<p id="result_direction">方向：0</p>
		    </div>
		</div>
<!-- 方法一 -->
<!-- 方法二 -->
		<div id="" class="option">
			<div class="concainer">
				<div id="" class="top_line"   onmousemove="posi01(),posi02()"></div>
				<div id=""class="concainer_son">
					<div id="" class="left_line"   onmousemove="posi01(),posi02()"></div>
					<div id="control02" onmousemove="option02()" onmouseleave=" reset()"><p style="line-height: 1em;">方法二</p></div>
					<div id="" class="left_line"   onmousemove="posi01(),posi02()"></div>
				</div>
				<div id="" class="top_line"   onmousemove="posi01(),posi02()"></div>
				
			</div>
			<div class="result">
				<div class="header">结果</div>
				<p id="result_speed2">速度：0</p>
				<p id="result_distance2">距离：0</p>
				<p id="result_direction2">方向：0</p>
			</div>
		</div>
<!-- 方法二 -->

css3代码

* {
	margin: 0;
	padding: 0;
}
body{
	min-height: 100vh;
	width: 100%;
	background-image: linear-gradient(0deg,#1c0643,#041334);
	background-repeat: no-repeat;
}
.option{
	background-color: #d8d8d8;
	box-sizing: border-box;
	margin-top: 4em;
	height: 360px;
	padding: 30px;
	display: flex;
	justify-content: center;
}
.concainer{
	background-color: #9d9d9d;
	width: 400px;
	border-radius: 8px;
	justify-content: center;
	display: flex;
	flex-direction: column;
}
p{
	color: aliceblue;
	line-height: 300px;
}
.result{
	background-color: #ffffff;
	margin-left: 1em;
	width: 120px;
}
.result p{
	color: gray;
	line-height: 1.8em;
	padding:0.5em 0.8em;
}
.header{
	background-color: #5555ff;
	color: whitesmoke;
	height: 2em;
	text-align: center;
	line-height: 2em;
}

<!--下面是02.css-->
<!--下面是02.css-->
<!--下面是02.css-->

.top_line, .left_line{
	background-color: blue;
	margin: 0;
	padding: 0;
	display: block;
}
.top_line{
	height: 15px;	
	width: 100%;
}
.concainer_son{
	display: flex;
}
.left_line{
	height: 100%;
	width: 15px;
}
#control02{
	width: 370px;
	height: 270px;
}

3.js获取到鼠标事件

1.理解鼠标事件

鼠标事件有很多，我们这里用到了onmousemove、onmouseleave、，onmouseenter。