js的坐标显示

最新推荐文章于 2022-10-25 10:13:37 发布

2333!!!!!

最新推荐文章于 2022-10-25 10:13:37 发布

阅读量387

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_46564011/article/details/122504170

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        .cursor-box{
            width: 800px;
            height: 600px;
            border:1px solid crimson;
            margin: 10px auto;
        }
        .view{
            width:100%;
            text-align: center;
            margin-top:5px ;
        }
    </style>
</head>
<body>
<div id="view" class="view">鼠标X轴:<span id="view-x"></span>;鼠标Y轴<span id="view-Y"></span></div>
<div id="cursor-box" class="cursor-box"></div>
<script type="text/javascript">
    window.onload=function() {
        var cursor_box = document.getElementById("cursor-box");
        var view_x = document.getElementById("view-x");
        var view_Y = document.getElementById("view-Y");
        cursor_box.onmousemove=function (e) {
            /*js的window对象会默认传值给参数,这个e我是没有传参数的
            是onmouseover自己传递的参数
            * */
            view_x.innerText=e.clientX;
            view_Y.innerText=e.clientY;
            /*
            * 这种方法在谷歌浏览器可用其他浏览器是window对象的属性用法是
            * window.e.clientX;
            * window.e.clientY;
            * 但这方法在谷歌中不行
            *是个报错报错就是false了
            * 一般来说只要if()中有值不是0都是true
            * */
            if(window.e.clientX){
                console.log("行");//这个会报错
            }
            if (!window.e.clientX)
            {
                console.log("是个false");//这个会报错他是ie可行但现在都没有ie了
                //好吧他甚至不是false
            }
        }//确实有点忙在校要回家而且今天上javaee的新课学mybatis就复习了一下mybatis
    }
</script>
</body>
</html>