工作随记
关注
分享
扫一扫
文章平均质量分 54
工作随记
一颗不甘坠落的流星
前端专栏博主，目标是归纳前端所需要各种技术的使用，不是在补充、就是在重写博客的路上，一步步完善中。
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
【JS】获取元素宽高（例如div）
本文介绍了在React中获取元素高度的几种方法：offsetHeight（含边框）、clientHeight（不含边框）和scrollHeight（含滚动内容）。通过useRef绑定DOM元素，在useEffect中获取初始高度并监听窗口变化更新高度值。示例代码展示了如何创建一个响应式的高度测量组件，包含resize事件处理和高度显示功能。纯JS版本也可用getElementById替代useRef实现相同效果。原创 2025-07-22 18:14:40 · 201 阅读 · 0 评论 -
【JS】解析数字精度丢失问题及解决方案
摘要：本文介绍了处理大数字数据的两种方法：1) 最佳实践是让后端以字符串形式返回大数字，避免精度丢失；2) 若后端无法修改，前端可通过JSON.parse的reviver函数将指定字段(如snapshotId)转换为字符串。示例展示了React组件中如何实现这一转换，包括API请求、状态管理和大数字处理逻辑。该方法适用于需要处理后端返回的大数字值(如长ID)而不损失精度的场景。原创 2025-07-07 17:32:08 · 187 阅读 · 0 评论 -
【JS】动态计算文件大小，选择合适的单位（例如MB/GB/TB）
【代码】【JS】动态计算文件大小，选择合适的单位（例如MB/GB/TB）原创 2025-05-13 15:35:27 · 328 阅读 · 0 评论 -
【JS】计算任意字符串的像素宽度（px）
JS 计算任意字符串的像素宽度（px）原创 2025-04-21 18:21:46 · 218 阅读 · 0 评论 -
【React】搜索时高亮被搜索选中的文案
React 搜索时高亮被搜索选中的文案原创 2025-04-21 18:13:15 · 352 阅读 · 0 评论 -
【React】获取元素距离页面顶部的距离
React 获取元素距离页面顶部的距离原创 2025-04-21 17:55:21 · 449 阅读 · 0 评论 -
【Moment.js】判断某个时间是否位于某个时间区间范围内
Moment.js 判断某个时间是否位于某个时间区间范围内原创 2025-03-25 11:09:22 · 412 阅读 · 0 评论 -
【Moment.js】计算两个时间的时间差，并将结果转换为 天、时、分、秒 格式
Moment.js 计算两个时间的时间差，并将结果转换为 天、时、分、秒 格式原创 2025-03-25 11:02:22 · 480 阅读 · 0 评论 -
【React】刷新页面或跳转路由时进行二次确认
【代码】【React】刷新页面或跳转路由时进行二次确认。原创 2025-01-06 17:29:52 · 570 阅读 · 0 评论 -
【HTML】根据不同域名设置不同的网站图标（替换 link 中 href 地址）
/ 根据不同的域名设置不同的favicon。原创 2024-12-16 18:18:51 · 601 阅读 · 0 评论 -
【Antd】使用Upload组件基于fetch上传文件并添加额外参数
【代码】【Antd】使用Upload组件基于fetch上传文件并添加额外参数。原创 2024-12-16 18:13:50 · 487 阅读 · 0 评论 -
【JS】将UTF-8编码的字节序列转换为字符串
将UTF-8编码的字节序列转换为字符串原创 2024-09-23 14:32:57 · 577 阅读 · 0 评论 -
【React】使用 antd 加载组件实现 iframe 的加载效果
使用 antd 加载组件实现 iframe 的加载效果原创 2024-07-19 17:18:14 · 986 阅读 · 0 评论 -
【React】监听浏览器返回事件
React 监听浏览器返回事件。原创 2024-07-11 14:52:41 · 1063 阅读 · 0 评论 -
【JS】获取接口返回 EventStream 结构的数据（即接收读取 stream 流）
前端获取接口返回 EventStream 结构的数据（即接收读取 stream 流）原创 2024-04-12 17:27:57 · 7802 阅读 · 1 评论 -
【JS】转换多个json结构的字符串为数组
js 转换多个json结构的字符串为数组原创 2024-04-12 17:05:13 · 1494 阅读 · 0 评论 -
【ProComponents】解决 ProTable 中 params 参数改变，request 函数未触发问题
Antd ProComponents 解决 ProTable 中 params 参数改变，request 函数未触发问题原创 2024-03-28 13:42:14 · 1475 阅读 · 0 评论 -
【Antd】给 DatePicker 设置快捷时间选项
Antd 给 DatePicker 组件设置快捷时间选项原创 2024-03-12 17:15:50 · 1590 阅读 · 0 评论 -
【Antd】Form 表单获取不到 Input 的值
Form 表单获取不到表单值问题分析及解决方法原创 2024-02-22 15:19:34 · 1291 阅读 · 0 评论 -
【Echarts】解决Y轴内容太长被截断导致显示不全
解决Y轴内容太长被截断导致显示不全原创 2023-12-26 10:31:48 · 2674 阅读 · 0 评论 -
【CSS】实现跳动文字·教程
CSS 简单实现跳动文字案例原创 2023-07-08 18:32:03 · 3954 阅读 · 2 评论 -
【前端】手写轮播图·教程1
文章目录需求分析：效果图：源代码：所用图片：需求分析：根据图片的数量生成相同的小圆点，类名是slider-ctrl-con显示第一个图片，同时第一个小圆点高亮，类名是:slider-ctrl-con current;点击prev显示上一张图片，同时对应小圆点高亮点击next显示下一张图片，同时对应小圆点高亮点击小圆点，切换到对应的图片，同时小圆点高亮可以自动轮播（每隔3000ms自动切换到下一张）鼠标移入slider盒子，停止轮播鼠标移出slider盒子，继续轮播效果图：源代码原创 2021-02-03 10:33:23 · 600 阅读 · 1 评论 -
【前端】手写轮播图·教程2
文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：根据图片数量生成对应的小圆点克隆第一个li，放到ul的最后面最开始显示第一个li,点亮第一个小圆点点击left按钮，看上一张，点亮小圆点点击right按钮，看下一张，点亮小圆点点击小圆点，看相应图片，点亮小圆点可以自动轮播鼠标移入，停止轮播鼠标移出，开始轮播源代码：HTML部分<div class="all" id='all'> <div class="screen" id="sc原创 2021-02-03 19:46:34 · 559 阅读 · 0 评论 -
【前端】手写打字游戏·教程
文章目录效果图：需求分析：源代码：效果图：需求分析：在char这个div里面显示要输入的字母，大写在result这个div里面时时显示正确率，比如98%给文档绑定按键事件如果输入的内容和char里面一致，显示正确动画：animated zoomIn,并更换输入的字母如果输入的内容和char里面不一致，显示错误动画：animated shake error不管是正确还是错误都时时更新result里面的正确率源代码：HTML部分<mian> <div原创 2021-02-04 17:41:22 · 720 阅读 · 1 评论 -
【Vue】实现搜索内容变红·教程
文章目录效果图源代码效果图未搜索前搜索内容后源代码<!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-s原创 2021-03-26 19:07:52 · 1178 阅读 · 0 评论 -
【前端】手写星级评分·教程
文章目录需求分析：效果图：源代码：所用图片：需求分析：鼠标移入哪个星星，哪个星星及其前面的星星都高亮同时显示相应文字鼠标点击哪个星星，哪个星星及其前面的星星都高亮鼠标移出 ul ，上次点击的星星及其前面的星星都高亮鼠标移出 ul ，如果没有点击过，则所有星星都暗效果图：源代码：HTML部分<!-- ul 里面设置5个 li li 用来放置星星div 用来放置显示的文字--><ul id="ul1" ><li class="defaul原创 2021-02-02 19:12:08 · 1222 阅读 · 3 评论 -
【系统】实现简单注册登录功能
文件夹路径图code（总文件夹）public（HTML文件夹）cart.html（登录成功所跳转的页面）login.html（登录页面）register.html（组成页面）login.php（实现登录功能）register.php（实现注册功能）connect.php（封装需要反复用到的信息）HTML文件cart.html 文件代码<!DOCTYPE html><html lang="en"><head> <m原创 2021-02-23 17:43:25 · 7002 阅读 · 0 评论 -
【前端】手写手风琴·教程
文章目录效果图：源代码：效果图：未展开时的效果鼠标悬浮在其上的效果源代码：HTML部分：<!-- 1.创建一个div盒子容器 2.div盒子里面创建ul，设置id名box 3.ul里面li用来放置图片使用--><div> <ul id="box"> <li></li> <li></li> <li></li> <li&g原创 2021-02-02 11:52:45 · 1128 阅读 · 2 评论 -
【前端】实现放大镜效果·教程
文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：鼠标移入小盒子里面，大盒子显示,mask显示鼠标移出小盒子，大盒子隐藏，mask隐藏鼠标在小盒子里面移动，mask跟随鼠标移动，鼠标在mask中间mask不能超出小盒子范围鼠标在小盒子里面移动，大盒子显示大图的相应部分源代码：HTML部分<div id="box" > <div id="small"><!-- 小图片所在的盒子 --> <img src="001.jpg原创 2021-02-04 11:07:36 · 743 阅读 · 2 评论 -
【前端】实现图片轮播·教程
文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：页面打开的时候，img中显示第一福图，order里面显示第一幅图的进度，info显示第一幅图的信息初始时顺序点击播放点击自动轮播按钮，变成循环播放模式，未开始播放点击prev按钮，向左自动循环播放点击next按钮，向右自动循环播放点击顺序点击按钮，变成顺序播放模式点击prev按钮，img里面变成前一张图点击next按钮，img里面变成后一张图源代码：HTML部分<div id="controls">原创 2021-02-04 15:52:33 · 1030 阅读 · 1 评论 -
【前端】实现图片无缝滚动·教程
文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：实现无缝滚动源代码：HTML部分<div id="box"> <ul id="u"> <li><img src="a.jpg" alt="" /></li> <li><img src="b.jpg" alt="" /></li> <li><img src="c.jpg" alt="" />&l原创 2021-02-04 09:30:26 · 1036 阅读 · 1 评论 -
【前端】手写数字时钟·教程
文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：通过date获取时间通过间隔定时器setInterval动态获取时间间隔定时器setInterval间隔设置为1000毫秒（1秒）获取一次时间为了样式好看，我们这是用数字图片来代替数字的源代码：HTML部分 <div id="div"> <img src="img/0.png" /> <img src="img/0.png" /> 时 <img src="img原创 2021-02-04 19:40:35 · 1533 阅读 · 3 评论 -
【前端】实现旋转木马轮播图·教程
文章目录效果图：需求分析：源代码：所用图片：效果图：需求分析：页面打开的时候，每个li缓动到相应位置鼠标移入slide，箭头显示鼠标点击prev按钮，显示上一张鼠标点击next按钮，显示下一张源代码：HTML部分<div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#">原创 2021-02-03 21:17:03 · 967 阅读 · 0 评论 -
【Vue】实现简易待办事项表·教程
文章目录效果图源代码效果图无事项时：有事项时：源代码<!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原创 2021-04-09 22:03:13 · 777 阅读 · 0 评论 -
【Vue】实现点击单行变色·教程
文章目录效果图源代码效果图打开页面时：点击第二行源代码<!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-scal原创 2021-04-09 20:12:04 · 531 阅读 · 0 评论 -
【AJAX】实现登录验证·教程
效果图：HTML文件<!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">原创 2021-02-24 18:58:57 · 2013 阅读 · 0 评论 -
【CSS】手写 Tooltip 提示组件
css 手写 Tooltip 提示组件，实用于定制化场景原创 2023-07-26 11:24:59 · 1225 阅读 · 0 评论 -
【CSS】悬浮动画
css 悬浮动画原创 2023-07-08 18:07:52 · 1049 阅读 · 0 评论 -
【JS】数组降维
在项目中，我们常常要处理比较复制的数据结构，而又找不到现成的方法，这时候就需要我们手动用 js 原生去封装一个了，这里介绍的是将多维数组降一层结构的方法，比如三维数组转二维数组、二维数组转一维数组，...原创 2022-07-04 15:22:32 · 586 阅读 · 0 评论 -
【JS】在字符串某个位置插入子字符串
在字符串某个位置插入子字符串示例 1：/* str：原字符串 index：指定插入的索引文字 insertStr：要插入的字符串*/function insertStr (str, index, insertStr) { const ary = str.split(''); // 转化为数组 ary.splice(index, 0, insertStr); // 使用数组方法插入字符串 return ary.join(''); // 拼接成字符串后输出}con原创 2021-12-20 15:18:51 · 12033 阅读 · 0 评论