欢迎来到我的博客！在这里，我将分享我在前端开发方面的知识和经验。让我们一起探索前端开发的无限可能！

该代码定义了一个用于判断设备类型的函数getDeviceType()，通过分析用户代理字符串、触摸功能和屏幕尺寸来区分手机、平板或PC。主要检测逻辑包括：识别iPad/iPad Pro（包括MacOS桌面模式）、Android平板（含特殊处理的移动模式），以及通用平板判断标准（触摸+中等屏幕）。对于手机则检测移动设备特征并排除平板情况，剩余情况归为PC。最终返回"phone"、"tablet"、"pc"

本文介绍了使用javascript-obfuscator插件对JavaScript代码进行混淆保护的方法。首先通过npm安装插件，然后在项目根目录创建混淆配置文件obfuscator.config.js，配置包括代码压缩、控制流扁平化、死代码注入等多项保护措施。接着创建obfuscate.js脚本，该脚本会遍历指定目录下的所有.js文件，应用混淆配置后输出到新目录。最后通过命令执行混淆，生成混淆后的JS文件，建议在发布时使用混淆版本，开发时保留原始版本以便调试。注意事项包括：修改JS后需重新混淆，以及保持文

这段代码实现了移动端客服悬浮按钮的拖动功能。通过touch事件监听实现元素拖拽，包含以下核心功能： 使用touchstart/touchmove/touchend事件处理拖拽操作 计算手指在元素内的偏移量实现精准拖拽定位 添加边界检查防止元素被拖出可视区域 拖动时禁止页面滚动（通过添加dragging类） 使用transform:translateZ(0)开启硬件加速提升动画流畅度 元素采用fixed定位，确保在页面滚动时保持位置不变 代码结构清晰，包含完整的拖拽开始、移动和结束处理逻辑。

本文解决了三种常见的页面滚动跳转问题：1）页面滑动后跳转/刷新不在顶部；2）带锚点跳转时从下方滚动到锚点；3）固定头部高度变化导致的锚点定位不准。通过统一的JS解决方案：先强制滚动到顶部，再检测锚点进行平滑跳转。代码使用window.scrollTo(0,0)重置位置，然后通过querySelector查找锚点元素，用scrollIntoView实现平滑滚动，并添加10ms延迟确保执行顺序。该方法简单有效，适用于各种滚动相关跳转场景。

该代码实现了一个日期选择弹窗组件，包含以下核心功能： 界面结构：底部弹出层设计，包含年份、月份和日期三个可滚动选择区域 交互功能： 支持通过滚轮选择年月日 可切换选择开始/结束时间 提供重置和确定按钮 数据处理： 动态生成100年的年份列表 自动计算每个月的天数 格式化输出日期字符串 验证逻辑： 检查开始时间不能晚于结束时间 确保两个时间都已选择 组件采用响应式设计，使用CSS实现平滑滚动效果和视觉反馈，适合在移动端或Web端使用。

这段代码实现了一个交互式图片画廊布局，包含5张图片。主要特点：1)使用CSS Grid布局创建3列2行网格；2)默认让第一张图片占据左列全高；3)通过鼠标悬停交互，点击的图片会放大占据左列，其他图片动态调整位置；4)实现平滑过渡动画效果；5)每次交互时保持其他图片有序排列。该布局适合展示精选图片，通过简单的交互让用户聚焦当前选中的图片。

该代码实现了一个分页组件，包含以下功能：1. 封装了分页逻辑，支持总页数和当前页码参数；2. 根据页数自动调整显示样式：页数<=10时显示全部页码，>10时智能显示首尾页码和当前页附近页码；3. 包含上一页/下一页按钮，当前页高亮显示；4. 通过点击页码可触发数据请求和分页刷新；使用方法：调用refreshPages(总页数,当前页)初始化分页，点击页码会触发searchJob方法请求数据。

该代码实现了一个消息提示弹窗组件，支持四种样式（默认、成功、失败、警告）。通过闭包封装了createMessageElement和showMessage方法，根据传入类型动态设置背景色、边框色、文字颜色及图标。提示框具备自动消失功能（默认1秒），支持z-index层级递增和动画过渡效果。调用方式为message.none()/info()/error()/success()，可传入内容和显示时间。组件会自动清除上一个提示框，确保界面整洁。

通过jQuery实现滚动到3800px时触发数字从0到目标值的2秒递增动画效果，且仅执行一次

本文介绍了在JS文件中实现响应式字体大小调整的方法，以及使用rem单位的注意事项。建议将代码放在全局JS文件中，通过监听窗口大小变化动态调整根元素字体大小（基于750px设计稿）。在CSS中使用rem单位时需安装px转rem插件，并推荐配置单独的px转rem快捷键（而非默认的alt+z双向转换），避免混合单位时出现转换混乱。文中提供了具体的样式示例，展示了如何将px值转换为rem单位（如10px→0.625rem），同时指出直接使用px单位不会响应尺寸变化。

摘要：该代码实现了一个账户变动情况表格，使用Vue3的Element Plus组件库构建。表格包含标题行、多级表头（3个账号共11个子账户）和数据行。数据区分为收入、支出等类别，支持单行和多行数据展示（如收入包含订单回款、利息等子项）。所有单元格使用el-input组件实现可编辑功能，并设置了统一样式（无边框、居中显示等）。初始数据通过ref响应式对象定义，包含7个银行账户和4个支付平台的账户信息，各类金额初始值为0。表格采用自适应宽度布局，重要数据行以红色加粗显示。

【代码】H5跳转下载页面，苹果跳转appstore应用商店,安卓跳转应用宝或者直接下载安装包，也可以去其他应用商店。

【代码】js计算当（月/年）工作日（除去节假日）时间进度。

子窗口传参 iframe页面里面使用。

【代码】Promise的使用。

【代码】前端通过后端返回的文件流，下载内容到本地。

【代码】js 下载在线视频等多个文件到一个文件夹导出压缩包下载到本地。

监听html元素被删除，这个元素被删除之后在这个父盒子里面重新生成。

【代码】通过生日计算年龄。

【代码】js 时间单位秒转时分秒方法封装。00：00：00

axios在线网址链接https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.jshttps://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axiosa.js

window.scrollTo(X,Y) 还可以使用a标签 进行滚动不用计算滚动多少px。

【代码】数组排序方法——sort()

找数组中出现次数最多的字符修改字符串中所有指定的字符去重 排序

通过遍历添加多个属性值

生成随机背景颜色

bug心得在实现修改和删除功能中，我是给ul分两次绑定点击事件，想分布实现修改和删除，然后发现不管是点击修改还是删除都只执行上面一种代码，然后经过指导做if判断点击的是那个按钮来分别实现不同的功能。注意innerHTML是属性，不能加小括号获取内容console.log(target.innerHTML)直接获取。2.减少DOM元素操作，只需要绑定一个父元素就可以，不用循环遍历每一个子元素进行绑定事件操作，核心1.通过事件冒泡给子元素添加事件，这样无论点击修改还是删除都只执行修改程序。...........

获取鼠标点击时在屏幕的位置行内事件绑定 还可以代替事件委托 innerHTML+=有时候比创建添加元素更加方便

jq实现轮播图建议直接去插件库下载。​jQuery插件库-收集最全最新最好的jQuery插件​

ES6新特性语法。

事件冒泡 默认事件 定时器 事件委托 事件监听

/ 实例对象隐式__proto__属性 去找constructor 在原型对象里面找到这个属性。如果先new实例对象 再创建原型成员 之前new的实例对象还指向之前的原型成员 所以访问不到。通过实例对象__proto__向上找 没有原型成员就问undefined 直到null。因为设置原型对象的时候会改变实例对象的__proto__指向新创建的原型成员。fun.prototype 指向原型对象。属性，属性值是一个普通的对象。属性，属性值是一个普通的对象。...

创建对象的五种方式

对象的七种继承方式。

模块化的语法分为导出和导入两部分

自动采集网页内容

【代码】a标签锚链接到顶部加过度效果css。

Fri May 05 2023 00:00:00 GMT+0800 (中国标准时间)

如果页面还有其他功能会改变页面数据 比如：筛选列表数据 会重新生成新的列表。scrollRef.value.scrollTop = 0 //滚动到顶部。page.value = 1 // 恢复初始值。需要清除当前的分页状态。

关闭和刷新页面都会触发，一般都不用来做弹窗提示，一般用来做数据操作。关闭浏览器不会保存操作。