H5学习之6 获取鼠标坐标值并且显示其值

最新推荐文章于 2022-06-27 11:02:31 发布

GOGOGOAAAA

最新推荐文章于 2022-06-27 11:02:31 发布

阅读量1.8k

点赞数

分类专栏： h5 文章标签： html5

本文链接：https://blog.csdn.net/qq_29469941/article/details/52017017

版权

h5 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        body {
            font-size: 70%; /*设置字的大小*/
            font-family: verdana, helvetica, arial, sans-serif;
            /*
            设置body部分的样式，直接写在head的style里，直接用body{}这种形式
            设置字体，优先采用第一个，
            第一个系统不识别就采用第二个，可以字体名称可以加双引号
            */
        }
    </style>

</head>
<body style="margin:0px"> <!--设置body标签部分与左边的距离，margin的意思是边缘。0也就是body会贴着最左边生成-->

<p>鼠标停在空白区域可以显示坐标</p>

<div id="coordiv" style="float:left;width: 199px;height:99px;border:1px solid black "
     οnmοusemοve="shubiaojinru(event)" οnmοuseοut="shubiaolikai(event)"
        > <!--
        div的style也就是样式可以直接定义在div的标签里
         onmousemove也就是当鼠标进入的时候执行的函数，onmouseout也就是当鼠标离开的时候执行的函数。
        -->

</div>
<br/>
<br/>
<br/>

<div id="xyzuobiaoxianshiquyu">

</div>

<script type="text/javascript">

    function shubiaojinru(e) {/*当鼠标进入时，执行此函数。*/
        x = e.clientX;/*直接写一个x获取鼠标的x*/
        y = e.clientY;/*直接写一个y获取鼠标的y*/
        document.getElementById("xyzuobiaoxianshiquyu").innerHTML = "Coordinates:("+x+","+y+")";
       /*
       获取用于显示文本的div然后通过 .innerHTML=""; 来设置需要显示的文本内容，
       文本内容直接用“”括起来，数据内容比如x,y,需要在前后加上+
       */
    }
    function shubiaolikai(e) {/*鼠标离开时执行此函数*/
        document.getElementById("xyzuobiaoxianshiquyu").innerHTML = "";
       /*获取div,设置其显示内容为空白*/
    }
</script>

</body>
</html>

具体效果如下

（因为截图时无法截取鼠标，所以图片里没有鼠标）鼠标在div外

鼠标在div内

思路解释：

第一句话是写在body标签里的一个p标签，p标签是一个单独段落，所以再创建div时会在下一行

<p>鼠标停在空白区域可以显示坐标</p>

然后是两个连续的div标签，也都写在body标签里，第一个div用于判定鼠标坐标，第二个div用于显示鼠标坐标值

<div id="coordiv" style="float:left;width: 199px;height:99px;border:1px solid black "
     οnmοusemοve="shubiaojinru(event)" οnmοuseοut="shubiaolikai(event)"
        > <!--
        div的style也就是样式可以直接定义在div的标签里
         onmousemove也就是当鼠标进入的时候执行的函数，onmouseout也就是当鼠标离开的时候执行的函数。
        -->
</div>
<br/>
<br/>
<br/>
<div id="xyzuobiaoxianshiquyu">

div的属性 id，style设置样式（float：left向左浮动，不然第二个div会直接出现在第一个div下边），onmousemove鼠标进入此div时执行的函数，onmouseout鼠标离开此div时执行的函数。

此外，这里设置了一个body标签的样式，直接写在了body标签的style属性里

<body style="margin:0px"> <!--设置body标签部分与左边的距离，margin的意思是边缘。0也就是body会贴着最左边生成-->

不仅在此处设置了body标签的样式，而且还在head标签里写了style标签来更改body标签内容的样式，而style标签只能写在head标签里，而script标签则可以写在head标签与body标签里。

<style type="text/css">
    body {
        font-size: 70%; /*设置字的大小*/
        font-family: verdana, helvetica, arial, sans-serif;
        /*
        设置body部分的样式，直接写在head的style里，直接用body{}这种形式
        设置字体，优先采用第一个，
        第一个系统不识别就采用第二个，可以字体名称可以加双引号
        */
    }
</style>

这是写在head标签里的style标签，用来设置了一下body的字体样式。

最后是功能函数的实现，script标签实现。写在了body标签里。

<script type="text/javascript">

    function shubiaojinru(e) {/*当鼠标进入时，执行此函数。*/
        x = e.clientX;/*直接写一个x获取鼠标的x*/
        y = e.clientY;/*直接写一个y获取鼠标的y*/
        document.getElementById("xyzuobiaoxianshiquyu").innerHTML = "Coordinates:("+x+","+y+")";
       /*
       获取用于显示文本的div然后通过 .innerHTML=""; 来设置需要显示的文本内容，
       文本内容直接用“”括起来，数据内容比如x,y,需要在前后加上+
       */
    }
    function shubiaolikai(e) {/*鼠标离开时执行此函数*/
        document.getElementById("xyzuobiaoxianshiquyu").innerHTML = "";
       /*获取div,设置其显示内容为空白*/
    }
</script>