js gets the direction and speed of the mouse

1. Knowledge points

js foundation, BOM, DOM, array, html5, css3, callback function

 

2.html+css3 create a good front-end page

Here I used two different methods:

html code

<!-- 方法一 -->
		<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 code

* {
	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 gets the mouse event

1. Understand mouse events

There are many mouse events, we use onmousemove, onmouseleave, and onmouseenter here.