t03 dom 小练习显示固定区域鼠标坐标

最新推荐文章于 2022-04-15 15:05:13 发布

weixin_43708170

最新推荐文章于 2022-04-15 15:05:13 发布

阅读量77

点赞数

分类专栏： dom练习文章标签： js dom

本文链接：https://blog.csdn.net/weixin_43708170/article/details/107406268

版权

dom练习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

t03 dom 小练习显示固定区域鼠标坐标

结果图

在这里插入图片描述

功能介绍

当鼠标在上方的框中移动时，下方的框会显示鼠标的横纵坐标表。

代码

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>显示鼠标坐标</title>
	</head>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		#box1{
			margin: 20px;
		}
		#box2{
			margin: 10px;
			width: 500px;
			height: 300px;
			border: 1px solid red;
		}
		#box3{
			padding: 10px;
			margin: 10px;
			width: 480px;
			height: 50px;
			border: 1px solid red;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){
			var box2 = document.getElementById("box2");
			//当box2中鼠标移动事件被触发时，执行函数
			box2.onmousemove = function(event){
				//解决兼容问题
				event = event || window.event;
				
				//获取鼠标的水平、垂直坐标
				var x = event.clientX;
				var y = event.clientY;
				var str = "横坐标："+x+"纵坐标："+y;
				
				//将坐标信息显示在box3中
				var box3 = document.getElementById("box3");
				box3.innerHTML = str;
			}
		}
	</script>
	<body>
		<div id="box1">
			<div id="box2"></div>
			<div id="box3"></div>
		</div>
	</body>
</html>

weixin_43708170

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
t03 dom 小练习显示固定区域鼠标坐标

t03 dom 小练习显示固定区域鼠标坐标结果图功能介绍当鼠标在上方的框中移动时，下方的框会显示鼠标的横纵坐标表。代码完整代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>显示鼠标坐标</title> </head> <style type="text/css"> *{ margin: 0;
复制链接

扫一扫