js 获取页面鼠标行为轨迹并描绘

最新推荐文章于 2024-04-25 15:58:41 发布
最新推荐文章于 2024-04-25 15:58:41 发布
阅读量3.8k 收藏 4
点赞数 1
分类专栏： html css js/jq
原文链接：https://zhidao.baidu.com/question/1176280230955939779.html
版权
js/jq 同时被 3 个专栏收录
4 篇文章 0 订阅
订阅专栏
html
2 篇文章 0 订阅
订阅专栏
css
2 篇文章 0 订阅
订阅专栏

转载自 https://zhidao.baidu.com/question/1176280230955939779.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <style>
        *{ 
            margin:0;
            padding:0;
            border:0;
        }
        .stage{
         
             
        }
        .track-monitor{
         
            background-color:orange;
        }
        .track-pad{
         
            height:200px;
            background-color:green;
        }
        .track-coordinate{
             
            background-color:purple;
            color:white;
            height:25px;
            line-height:25px;
            font-size:12px;
        }
        .track-coordinate-list{
         
            font-size:12px;
            width:100%;
            word-break:break-word;
             
        }
    </style>
    <script>
        window.addEventListener('load',function(){
         
            var pad = document.getElementsByClassName('track-pad')[0];
            var monitor = document.getElementsByClassName('track-monitor')[0];
            var coordinate = document.getElementsByClassName('track-coordinate')[0];
            var clist = document.getElementsByClassName('track-coordinate-list')[0];
            var reset = document.getElementsByTagName('button')[0];
            var fixSize = function(){
             
                monitor.width = window.innerWidth;
            };
             
            var context = monitor.getContext('2d');
            var cset = [];
              
             
            window.addEventListener('resize',function(){ fixSize(); });
             
            pad.addEventListener('mousemove',function(e){
                         
                context.strokeStyle = 'white';
                context.lineTo(e.x,e.y);
                context.stroke();
                coordinate.innerHTML = e.x+':'+e.y;
                cset.push(coordinate.innerHTML);
                clist.innerHTML = cset.join(',');
             
            });
             
            reset.addEventListener('click',function(){
                 
                fixSize();
                cset = [];
                clist.innerHTML = '';
                coordinate.innerHTML='在绿色的方块中滑动鼠标';
            });
             
            fixSize();
             
        });
    </script>
</head>
<body>
    <div class="stage">
        <div class="track-pad"></div>
        <canvas width="100" height="200" class="track-monitor"></canvas>
        <div class="track-coordinate">在绿色的方块中滑动鼠标</div>
        <button>重置</button>
        <div class="track-coordinate-list"></div>
    </div>
</body>
</html>

 

 

huoxingd
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
原生JS实现拖拽进度条、滚动鼠标显示相应的内容
越陌度阡
08-10 1662
今天要分享的是运用原生JS实现拖拽进度条、滚动鼠标显示相应的内容，实现效果如下： 以下是代码实现，欢迎大家复制粘贴。 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> &.........
JS获取元素，鼠标事件，改变内容
December_shi的博客
10-05 1207
1、获取元素的方法 根据ID获取：document.getElementById(‘设的ID名’) <div id="time">2019-9-9</div> <script> // 因为我们文档页面从上往下加载，所以先得有标签 所以我们script写到标签的下面 var timer = document.getElementById('time'); </script> 根据标签名获取元素：docu
js 获取鼠标位置 实时获取鼠标位置和获取鼠标点击位置
热门推荐
weixin_44642057的博客
10-22 1万+
在我们的实际开发中，我们需要实时地获取鼠标移动位置或鼠标点击位置，下面我们用js来获取鼠标实时移动位置和鼠标点击位置 首先我们来获取鼠标点击的位置 只需要监听页面点击就可以了，再用client来获取X和Y坐标 document.addEventListener("click", function (e) { console.log(e.clientX) console.log(e.clientY) }) 这样就可以获取到鼠标点击的X和Y的值了 但是
如何利用JS实现点击标签完成网页滑动到相应位置
weixin_43918109的博客
04-17 1277
如何利用JS实现点击标签完成网页滑动到相应位置 找到需要点击的所有a标签，放到一个类里面，这是简易版的滑动，匀速滑动。 <script> let aTags= document.querySelectorAll('nav.menu > ul>li>a'); //讲所有a标签放到aTags类中 for (let i=0; i<aTags.len...
js 模拟鼠标移动事件，并监听鼠标移动
最新发布
weixin_42883164的博客
04-25 533
js 实现鼠标移动，并监听鼠标事件
js 获取页面鼠标选中的文字
不会做饭的程序员的博客
01-08 871
js获取页面鼠标选中的文字，最主要的代码 event.selection = window.getSelection(); 页面代码 <div> <p class="content"> 爱神的箭偶家阿佘的疯狂啥叫看到你看见的ask的房价开始大幅九点六十分静安寺附近啊阿斯蒂芬了解了的萨芬加拉 福建省拉萨附近的拉丝机奥省的浪费空间大历史飞机拉萨附近拉萨的反馈吉拉斯飞机...
统计页面的标签种类
qq_39740095的博客
08-27 266
统计页面的标签种类 // 方法1 let tags = document.getElementsByTagName('*') // 获取所有标签的names // 各个标签名的计数 let names = [] let result = {} for(let i = 0;i<tags1.length;i++) { let name = tags1[i].tagName.toLocaleLowerCase() names.push(name) if(!result[name]) {
鼠标点击烟花特效，原生js写的烟花绽放效果
12-28
在`draw`方法中，我们将描绘烟花的轨迹，包括火箭上升、爆炸以及火花四溅的过程。 烟花的运动可以由物理学的原理模拟，例如重力、速度和方向。JavaScript中的`requestAnimationFrame`函数用于在每一帧中更新烟花的...
Canvas鼠标经过星星连成线特效
06-24
接着，我们通过JavaScript获取这个元素并创建一个`CanvasRenderingContext2D`对象，这是我们在Canvas上绘制的基本工具。 ```html <canvas id="starCanvas" width="800" height="600"></canvas> ``` ```javascript ...
css+js绘制曲线轨迹
03-28
在IT领域，CSS（Cascading Style Sheets）和JavaScript（JS）是网页设计与开发中的核心技术，用于实现页面布局、样式控制以及动态交互。本文将深入探讨如何利用这两门技术来绘制曲线轨迹。 首先，CSS作为样式表语言...
贝尔曲线，计算模拟两点坐标间的曲线移动轨迹源码
05-29
描述中提到了"计算模拟两点坐标间的曲线移动轨迹源码"，这意味着这个源代码可能实现了一个函数或类，用于根据输入的两个端点坐标和控制点坐标来生成三阶贝尔曲线的各个点，进而描绘出曲线路径。这通常涉及到递归或者...
跨年烟花代码-javascript烟花星空魔法师源代码下载
12-12
开发者可能使用Math.random()生成随机数，并结合一些物理公式（如抛物线轨迹）来计算烟花的运动轨迹。 6. 事件监听： 用户交互是这个项目的关键部分，比如鼠标点击触发烟花发射。开发者会监听鼠标点击事件，当用户...
js轨迹跟踪（动画轨迹，记录鼠标点击过的坐标点）
08-10
js轨迹跟踪（动画轨迹，记录鼠标点击过的坐标点）
根据需求通过js实现鼠标在内容区域滚动可以操作内容左右滑动，鼠标移动滚动条可以操作内容区域，鼠标点击滑动条可以操作内容区域
在无知中学习，在学习中成长，在成长中学习
03-24 780
根据需求通过js实现鼠标在内容区域滚动可以操作内容左右滑动，鼠标移动滚动条可以操作内容区域，鼠标点击滑动条可以操作内容区域
js实现页面滚动时自动切换Tab标签，点击标签自动滚动页面
weixin_47415511的博客
04-10 2712
js实现页面滚动时自动切换Tab标签，点击标签自动滚动页面
用js使html标签产生鼠标滑动效果,js+html+css实现鼠标移动div实例
weixin_33986223的博客
06-03 210
js：var posX;var posY;fdiv = document.getElementById("divBody");document.getElementById("divHead").onmousedown=function(e){if(!e) e = window.event; //IEposX = e.clientX - parseInt(fdiv.style.left);posY...
关于js如何获取鼠标划过文本的内容与下标
qq_38529889的博客
11-12 1564
$(document).ready(function () { $(&amp;quot;.contenttext&amp;quot;).mouseup(function (e) { var txt = window.getSelection(); //获取鼠标划过的对象 if (txt.toString().length &amp;amp;gt; 0) { var start = txt.anchor...
原生js获取鼠标位置 和 获取鼠标点击位置
前端小知识
07-27 5384
client获取的只是可视区域的X和Y坐标，如果页面有滚动条且滚动条滚动了，我们点击页面的同一位置，那么这个X和Y值是不会改变的，那么问题来了，怎么获取页面包括滚动条部分的X和Y坐标呢，这时候我们可以用page，page是获取这个页面的X和Y值，包括不可视区域!这也编写完成了就可以获取鼠标点击坐标和鼠标实时移动位置了~...
HTML 鼠标行为事件
恬静的男子的博客
10-16 5809
HTML 鼠标行为事件 onload 打开浏览器窗口做的一些事情 onunload 关闭浏览器窗口做一些事情 onFocus 事件在对象获得焦点时发生 onBlur 事件会在对象失去焦点时发生 onClick 事件会发生在点击时 onDbclick 事件会发生在双击时 onmouseDown 事件会在鼠标按键被按下时发生 onmouseUp 事件会在鼠标按键被松开时发生 onmouseOver 事...
如何用鼠标在网页上画出自己的名字并获取鼠标移动轨迹
06-10
可以通过HTML5的Canvas元素和JavaScript来实现在网页上用鼠标画出自己的名字并获取鼠标移动轨迹。以下是一个简单的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas Demo</title> <style> canvas { border: 1px solid black; } </style> </head> <body> <canvas id="myCanvas" width="500" height="500"></canvas> <script> var canvas = document.getElementById("myCanvas"); var ctx = canvas.getContext("2d"); var isDrawing = false; var mouseMoves = []; canvas.addEventListener("mousedown", function(e) { isDrawing = true; ctx.beginPath(); ctx.moveTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); mouseMoves.push({x: e.clientX - canvas.offsetLeft, y: e.clientY - canvas.offsetTop}); }); canvas.addEventListener("mousemove", function(e) { if (isDrawing) { ctx.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop); ctx.stroke(); mouseMoves.push({x: e.clientX - canvas.offsetLeft, y: e.clientY - canvas.offsetTop}); } }); canvas.addEventListener("mouseup", function(e) { isDrawing = false; }); // 将 mouseMoves 发送到后台进行处理 </script> </body> </html> ``` 在这个示例代码中，我们创建了一个Canvas元素，并绑定了鼠标事件。当用户按下鼠标左键时，我们开始绘制路径，并将路径的起点设置为鼠标当前位置，并将当前位置添加到 `mouseMoves` 数组中。当用户移动鼠标时，如果正在绘制路径，则将路径的终点设置为鼠标当前位置，并绘制出路径，同时将当前位置添加到 `mouseMoves` 数组中。当用户松开鼠标左键时，停止绘制路径。 最后，我们可以将 `mouseMoves` 数组发送到后台进行处理。 你可以根据自己的需求修改这个示例代码，实现在Canvas上绘制出自己的名字并获取鼠标移动轨迹。需要注意的是，对用户的隐私应该保护，不应该收集任何敏感信息，同时也需要遵守相关的法律法规。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值