- 博客(137)
- 资源 (2)
- 收藏
- 关注
原创 时间线 (步骤条)
在前端开发中,时间线(Timeline) 和 步骤条(Step Progress) 是常见的 UI 组件,常用于展示流程、历史事件或操作引导。⚠️ 注意:横向时间线的连接线是每个 .time2 自己画的“右边部分”,所以最后一个元素的线可能会超出容器。实际项目中可通过 :not(:last-child)::after 优化。💡 注意:.time::after 的 height: 100% 会延伸到每个 .time 元素的底部,从而形成连续的竖线。利用 伪元素 ::before 绘制圆形节点(时间点)
2026-01-13 16:59:16
684
原创 数字时钟翻页效果
结构设计:4 个卡片分工明确,上下层分离。CSS 3D:利用rotateX实现真实翻页。JS 控制:动态替换内容 + 巧妙触发动画。性能优化:仅在值变化时更新,避免无效渲染。这是一种典型的“用 2D DOM 模拟 3D 物理效果”的前端动画范例,既高效又视觉惊艳。
2026-01-09 15:58:08
1063
原创 横向滚动上方列表查看进度条变化
将横向滚动的“相对进度”(0% ~ 100%)线性映射到进度条在容器内的“绝对位置”。指示长内容的阅读/浏览进度UI 中的导航辅助(如故事流、商品轮播)增强用户对可滚动区域长度的感知。
2025-12-17 15:18:24
375
原创 粒子 形成文字 效果 canvas
想象一下,我们要用很多小点(粒子)来"拼"出"123"这三个字。这就像用很多小星星拼出图案一样。这样就实现了用粒子组成文字的效果。
2025-12-02 10:31:32
338
原创 uniapp主包使用子包的图片 真机会显示不出来
在uniapp中 主包的页面 中 如果使用了子包的图片 真机中会显示不出来。解决办法 就是把图片变成背景图 就可以正常显示。这个sub 就是子包 这里我引用了子包的图片。
2025-10-31 09:57:40
181
原创 自定义 radio 小程序
主要就是利用 label 点击 去激活 radio 隐藏原生的radio 只显示 自定义的图片 就可以做到自定义图片。
2025-07-03 17:48:53
121
原创 小程序 顶部栏标题栏 下拉滚动 渐显白色背景
在这里插入图片描述](https://i-blog.csdnimg.cn/direct/3164fd0e6d6848efaa1e87e02c35179e.png。这个主要就是’background-color: rgba(255, 255, 255, ‘+opacityVal+’)!important’pages中 当前的页面 取消顶部标题栏 就可以自定义标题栏。下拉 100px 后 变成渐变成白色。
2025-06-23 11:04:10
289
原创 flex-wrap: wrap 之后元素上下间距好大
原因:当元素设置了flex-wrap:wrap之后会有一个默认属性 align-content: stretch,元素被拉伸以适应容器。1.flex-wrap: wrap 之后元素上下间距好大,实际上没有设置间距。添加:align-content:flex-start 使元素位于容器的开头。
2025-06-12 15:54:24
278
原创 body Param Query 三个 不同的入参 分别是什么意思 在前端 要怎么传 这三种不同的参数
• 直接在 URL 路径中传递参数,适用于 GET/DELETE 等请求。• 发送 POST/PUT/PATCH 请求,将数据放在请求体中。掌握这些参数的使用方式,能够更灵活地处理不同场景下的数据传递需求。用于处理不同类型的请求参数。• 在 URL 后附加查询字符串,适用于 GET 请求。在 NestJS 中,
2025-04-27 17:54:38
540
原创 代码雨效果
视觉增强:半透明覆盖实现拖尾、等宽字体保证对齐、随机颜色增强科技感。获取Canvas元素并设置高分屏适配(解决Retina屏模糊问题)循环重置机制:到达底部后70%概率继续下落,30%概率重置。坐标跟踪系统:nextChars数组记录每列当前下落深度。每帧用低透明度黑色矩形覆盖画布,产生渐隐拖尾效果。计算字符绘制位置(基于列索引和下落深度)判断是否到达底部(随机重置或继续下落)绿色系颜色建议(示例使用随机颜色)避免复杂图形操作(纯字符绘制)垂直坐标系基于字体大小动态计算。固定列宽布局减少计算量。
2025-03-24 17:19:10
229
原创 vue埋点
条件是否被监控说明浏览器环境使用 axios✅依赖 XMLHttpRequest使用 fetch 的 axios❌需取消注释 resetFetch()Node.js 环境❌无 XMLHttpRequest 对象当前代码中方法被注释,如需监控 fetch 请求需取消注释该方法。
2025-03-14 17:35:07
1273
原创 vite打包 去掉 crossorigin
这是是 自己编写的vite 插件 plugins:[replaceCrossorigin()] 丢进这个就好了。
2024-12-04 18:01:34
574
原创 infinite-scroll-disabled设置为false 还是会触发v-infinite-scroll 这个滚动方法
解决办法 给父组件加上一个 最小高度 min-height :100vh 就可以解决这个问题。这里list 没有设置高度 父组件 也没有设置高度 就会导致这个 问题。
2024-12-02 18:16:00
424
原创 如何做一个抽奖 转盘 设置概率
3.可以把奖品的每一项的等级和中奖概率 自己整合成数组 当抽到三等奖 比如三等奖有三个选项 分别是第三个 第五个和第八个。就可以在这三个内再随机选一个出来 乘以一份的角度 再减去一半的角度。2.概率可以用1到100的随机数 设置概率 例如1到60是三等奖 60到80是二等奖 80到95是一等奖 95到100是特等奖 概率可以自己设置100还是1000。1.可以把份数用360度 除以 多少个抽奖项 转到哪 就多加想要的那一项是第几个乘以 一份的角度 减去一半的角度 就刚好转到那个位置的中间。
2024-11-12 11:17:17
2744
原创 直播点赞效果
getRandom加载图像创建渲染函数:定义动画的各个属性(如缩放、位移、透明度等),并生成一个渲染函数。扫描并更新动画:在每一帧中更新动画状态并绘制图像。启动动画:创建新的渲染函数并添加到动画列表中,启动动画扫描。希望这些注释和解释能帮助你更好地理解这段代码!好的,让我们详细解释一下diffTime是如何产生的,以及它在整个动画过程中的作用。diffTimediffTime是通过计算当前时间与动画开始时间的差值,并将其归一化到 0 到 1 之间得到的。
2024-11-08 15:31:11
1093
原创 axios 发送 表单 application/x-www-form-urlencoded 用qs 序列化
这种的话 传过去 数组是 array 类型的 传过去的数据就不会有下标。在axios请求拦截器添加的就是。这样 的话 传过去的值就会是。在axios请求拦截器添加。
2024-10-30 15:20:43
372
原创 上传列表 对应上传进度
页面中一个上传文件的按钮 点击上传文件后会发起axios上传请求 同时会把这个文件的信息存在fileListing这个列表中,监听这个文件的上传进度 在页面中展示这个上传中的列表数据显示文件名和上传进度,上传完成后 进度隐藏 显示已上传完成要实现您描述的功能,我们需要使用前端技术来创建一个文件上传组件。这里我将提供一个基于Vue.js框架的示例代码,它使用了Axios库来处理文件上传请求,并在页面上动态显示文件的上传进度。
2024-10-29 16:38:50
521
原创 axios 取消请求 加上 控制并发 版本是1.7.5
从 v0.22.0 开始,Axios 支持 AbortController 以 fetch API 的方式取消请求。只有最后一个 能正常请求。
2024-10-29 15:18:31
607
2
jdk-8u144-windows-x64.zip
2019-12-09
ssm框架goods.zip
2019-12-09
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人
RSS订阅