搜索到
2
篇与
前端
的结果
-
用百度统计为你的博客赋能 百度统计是百度官方推出的免费网站分析工具，它不仅能实时监控访客行为，还能深入洞察用户来源、浏览路径、关键词偏好等关键指标。对于博主而言，掌握百度统计的使用方法，意味着你可以基于真实数据优化内容策略、提升用户体验，甚至提高广告转化率。本文将手把手带你完成从注册安装到核心数据分析再到实战优化建议的全过程快速上手：五步完成百度统计部署使用百度统计非常简单，只需三个步骤：1. 注册/登录账号访问 https://tongji.baidu.com，使用百度账号登录2. 添加你的博客站点进入百度统计后台页面，在“ 使用设置 > 网站列表 ”中点击“ 新增网站 ”，填写博客的完整域名（如 https://yourblog.com），务必与实际访问地址一致（是否带 www、协议是 http 还是 https 都要统一）。3. 嵌入百度统计JS脚本新增完网站后会自动跳转到代码获取页面系统会生成一段 JavaScript 跟踪代码（推荐使用异步加载版本），你需要将其粘贴到博客所有页面的 标签内。如果你使用的是 WordPress，可通过主题编辑器或插件（如 “Insert Headers and Footers”）轻松完成。⏱️ 安装完成后，等待约20分钟至几小时，即可在后台看到实时访客数据。4. 检查脚本状态5. 查看网站概况其他功能自行研究，这里就不在说了，如果有啥不懂的，欢迎到评论区留言哈😄 -
JS实现限制可移动div的移动范围 最近我的博客项目中需要用到可移动div框，虽然让div移动很简单，监听鼠标的坐标即可，但是如何限制可移动div的移动范围呢？这个问题困扰了我很久，我想了很久才有了解决方案思路 当我们将 div移动到最上方 并且起始坐标-当前坐标>0时，才将div顶部的距离限制（top:0px），其它方向同理。啥，听不懂？没关系，会CV大法就行，下面我将已封装好的代码列出：//移动盒子函数 //obj:对象，例如：document.getElementById("box") //moveX/moveY:存储在全局变量的x/y坐标 function moveBox(obj, moveX, moveY) { var box = obj; var left = box.offsetLeft; var right = box.getBoundingClientRect().right - window.innerWidth; var top = box.offsetTop; var bottom = box.getBoundingClientRect().bottom - window.innerHeight; var intX = event.clientX - moveX; var intY = event.clientY - moveY; intX = left < 20 && moveX - event.offsetX > 0 ? 0 : intX; intX = right > -5 && moveX - event.offsetX < 0 ? window.innerWidth - box.clientWidth : intX; intY = top <= 0 && moveY - event.offsetY > 0 ? 0 : intY; intY = bottom > -5 && moveY - event.offsetY < 0 ? window.innerHeight - box.clientHeight : intY; box.style.left = intX + "px"; box.style.top = intY + "px"; }不会用？没关系，下面给你提供一个示例：<!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>JS实现限制可移动div的移动范围</title> <style> #box { width: 300px; height: 300px; background-color: red; position: absolute; top: 5px; left: 30px; padding: 20px; } </style> </head> <body> <!-- 可移动盒子 --> <div id="box"></div> <script type="text/javascript"> var X; //鼠标起始X坐标 var Y; //鼠标起始Y坐标 var box = document.getElementById("box"); //可移动div对象 //移动盒子函数 //obj:对象，例如：document.getElementById("box") //moveX/moveY:存储在全局变量的x/y坐标 function moveBox(obj, moveX, moveY) { var box = obj; var left = box.offsetLeft; var right = box.getBoundingClientRect().right - window.innerWidth; var top = box.offsetTop; var bottom = box.getBoundingClientRect().bottom - window.innerHeight; var intX = event.clientX - moveX; var intY = event.clientY - moveY; intX = left < 20 && moveX - event.offsetX > 0 ? 0 : intX; intX = right > -5 && moveX - event.offsetX < 0 ? window.innerWidth - box.clientWidth : intX; intY = top <= 0 && moveY - event.offsetY > 0 ? 0 : intY; intY = bottom > -5 && moveY - event.offsetY < 0 ? window.innerHeight - box.clientHeight : intY; box.style.left = intX + "px"; box.style.top = intY + "px"; } //注册事件 box.addEventListener("mousedown", function () { Y = event.offsetY; X = event.offsetX; box.onmousemove = function () { moveBox(document.getElementById("box"), X, Y); }; }); //鼠标抬起销毁事件 box.addEventListener("mouseup", function () { document.body.onmousemove = null; X = void 0; Y = void 0; }); //鼠标离开可移动div也要销毁移动事件，否则会出bug box.addEventListener("mouseleave", function () { document.body.onmousemove = null; X = void 0; Y = void 0; }) </script> </body> </html>OK，快去试试吧！
