HTML代码

写一个div来作为鼠标区域

div中写一个span显示坐标信息

    <body>

        <div id="">

            <span></span>

        </div>

    </body>

给div和span增加样式并定位

        <style type="text/css">

            div{

                position: relative;/* 定位信息 */

                background-color: #398439;    /* 背景颜色 */

                width: 500px;    /* 宽度 */

                height: 500px;    /* 高度 */

            }

            span{

                position: absolute;/* 绝对定位 */

                color: red;    /* 文字颜色 */

            }

        </style>

添加事件

        <script type="text/javascript">

            window.onload = function(){

                var oDiv = document.getElementsByTagName("div")[0];//获取当元素节点

                var oSpan = oDiv.children[0];

                oDiv.onmousemove = function(e){    //鼠标移入事件

                    var evt = e || event;

                    var x = evt.offsetX;

                    var y = evt.offsetY;

                    oSpan.innerHTML = x + ',' + y + 'px';//显示坐标信息

                }

                /* 添加一个鼠标移出事件 */

                oDiv.onmouseout = function(){

                    oSpan.innerHTML = "";    //鼠标移除后 坐标信息消失

                }

            }

        </script>

效果图

当鼠标移入的时候左上角显示坐标，移出隐藏。

用js写一个鼠标坐标实例的更多相关文章

  1. 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  2. 用原生js写一个"多动症"的简历

    用原生js写一个"多动症"的简历 预览地址源码地址 最近在知乎上看到@方应杭用vue写了一个会动的简历,觉得挺好玩的,研究一下其实现思路,决定试试用原生js来实现. 会动的简历实现 ...

  3. HOOK API （一）——HOOK基础+一个鼠标钩子实例

    HOOK API (一)——HOOK基础+一个鼠标钩子实例 0x00 起因 最近在做毕业设计,有一个功能是需要实现对剪切板的监控和进程的防终止保护.原本想从内核层实现,但没有头绪.最后决定从调用层入手 ...

  4. JS写一个简单日历

    JS写一个日历,配合jQuery操作DOM <!DOCTYPE html> <html> <head> <meta charset="UTF-8&q ...

  5. 前端与编译原理——用JS写一个JS解释器

    说起编译原理,印象往往只停留在本科时那些枯燥的课程和晦涩的概念.作为前端开发者,编译原理似乎离我们很远,对它的理解很可能仅仅局限于"抽象语法树(AST)".但这仅仅是个开头而已.编 ...

  6. 如何使用 js 写一个正常人看不懂的无聊代码

    如何使用 js 写一个正常人看不懂的无聊代码 代码质量, 代码可读性, 代码可维护性, clean code WAT js WTF https://www.destroyallsoftware.com ...

  7. 使用JS制作一个鼠标可拖的DIV（二）——限制区域移动

    这次是要对上一篇的内容进行扩展. 由于需要对可拖动的 DIV 进行一个区域范围的限制,所以要给于一个容器,让可拖动的 DIV 元素不能逃出该容器的大小范围. 一.思路 1.在外层增加一个 DIV 容器 ...

  8. 使用JS制作一个鼠标可拖的DIV（四）——缩放

    原理与鼠标拖动 DIV 相同. 下面就先实现一个在DIV的右上角显示一个小正方形(类似). 当鼠标按下并拖动时,DIV会以要拖动的元素的左下角的坐标点定位,根据鼠标的拖动,按比例的扩大或缩小. 一.思 ...

  9. 【Part1】用JS写一个Blog（node + vue + mongoDB）

    学习JS也有一段时间了,准备试着写一个博客项目,前后端分离开发,后端用node只提供数据接口,前端用vue-cli脚手架搭建,路由也由前端控制,数据异步交互用vue的一个插件vue-resourse来 ...

随机推荐

  1. linux shell编程之变量和bash配置文件（第一篇）

    编程语言有两类 强类型:如C语言.数据具有其特定的类型,先声明定义后才能使用.数据运算时必须符合类型要求(如不能把字符串类型数据直接与整型数据做算数运算) 弱类型:如shell.数据默认为字符型,不用 ...

  2. 前端开发单位em

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. DPT-RP1 解锁过程整理

    前言 首先,感谢大神HappyZ ,没有他的教程,没有下文了. 其次,要感谢的是润物 ,没有她的教程, 可能要研究好久才能弄明白大神给的工具怎么用. 本人没接触过python,以为在命令行执行Pyth ...

  4. Ubuntu 一键伪装成Win 10，Kali Linux 2019 kali-undercover软件嫁接；

    今天,下午刷手机的时候,突然看到kali出了一个非常新颖的主题:该主题可以使得kali系统伪装成windows 10而变得低调起来:就像下面这样: 具体新闻链接:https://www.freebuf ...

  5. 简单聊一聊spring cloud stream和kafka的那点事

    Spring Cloud Stream is a framework for building highly scalable event-driven microservices connected ...

  6. 虚拟机中linux操作系统raid10(5块磁盘)配置流程及损坏磁盘的移除

    打开所要用的虚拟机,点击编辑虚拟机设置,点击硬盘,添加 2.一直点击下一步不做修改,直到最后完成 3.按照以上步骤添加5块磁盘 4.点击开启虚拟机,输入用户名root密码登录进去 5.进入虚拟机后,鼠 ...

  7. 第五章 Unity中的基础光照（1）

    [TOC] 渲染总是围绕着一个基础问题:我们如何决定一个像素的颜色?从宏观上来说,渲染包括了两大部分:决定一个像素的可见性,决定这个像素上的光照计算.而光照模型用于决定在一个像素上进行怎样的光照计算. ...

  8. 曹工杂谈：Spring boot应用，自己动手用Netty替换底层Tomcat容器

    前言 问:标题说的什么意思? 答:简单说,一个spring boot应用(我这里,版本升到2.1.7.Release了,没什么问题),默认使用了tomcat作为底层容器来接收和处理连接. 我这里,在依 ...

  9. luogu P1951 收费站_NOI导刊2009提高（2） |二分答案+最短路

    题目描述 在某个遥远的国家里,有n个城市.编号为1,2,3,-,n. 这个国家的政府修建了m条双向的公路.每条公路连接着两个城市.沿着某条公路,开车从一个城市到另一个城市,需要花费一定的汽油. 开车每 ...

  10. Xcode11 踩坑记录

    1.UITextView控件莫名导致崩溃 如上图所示,点击Step over 前进进入编译器内部 在lldb控制台输入指令 po $arg1 看到编译器给的提示是由于UITextView的问题. 解决 ...