<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[web00_11的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/web00_11</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; web00_11]]></copyright><item><title><![CDATA[前端页面在 Ctrl + 滚轮 时页面缩放，保持页面比例不动]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/154779460</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/154779460</guid><author>web00_11</author><pubDate>Thu, 13 Nov 2025 11:11:51 +0800</pubDate><description><![CDATA[Ctrl + 滚轮滑动可以使得前端页面方法缩小，页面内容比例会失衡，不好看。但是页面都已经做完不好再进行深层次的优化。那么就可以使用如下方式进行固定。想法：页面缩放会触发。]]></description><category></category></item><item><title><![CDATA[前端 React 实现数据懒加载-滚动触底加载数据]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/150528498</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/150528498</guid><author>web00_11</author><pubDate>Tue, 19 Aug 2025 16:25:16 +0800</pubDate><description><![CDATA[前端 web 项目中列表数据鼠标滚动触底分页加载数据]]></description><category></category></item><item><title><![CDATA[前端实现简易 计时器]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/147765188</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/147765188</guid><author>web00_11</author><pubDate>Wed, 07 May 2025 14:44:55 +0800</pubDate><description><![CDATA[【代码】前端实现简易 计时器。]]></description><category></category></item><item><title><![CDATA[React + JavaScript 实现可拖拽进度条]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/147219435</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/147219435</guid><author>web00_11</author><pubDate>Mon, 14 Apr 2025 12:54:53 +0800</pubDate><description><![CDATA[totalTime: 设置总时间（秒）: 设置初始时间（秒）onChange: 时间变化时的回调函数。]]></description><category></category></item><item><title><![CDATA[h5 调用手机摄像头拍照]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/145158546</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/145158546</guid><author>web00_11</author><pubDate>Wed, 15 Jan 2025 13:35:38 +0800</pubDate><description><![CDATA[【代码】h5 调用手机摄像头拍照。]]></description><category></category></item><item><title><![CDATA[echarts 图表在 div 容器盒子中根据 div盒子的大小变化自适应伸缩]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/144900755</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/144900755</guid><author>web00_11</author><pubDate>Fri, 03 Jan 2025 09:28:08 +0800</pubDate><description><![CDATA[echarts 图表在 div 容器盒子中根据 div盒子的大小变化自适应伸缩。// echarts 图标自适应缩放。// 参数是产生缩放的 DOM 盒子。// echarts 容器盒子。]]></description><category></category></item><item><title><![CDATA[case 管理页面静态布局以及功能实现]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/144773501</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/144773501</guid><author>web00_11</author><pubDate>Fri, 27 Dec 2024 17:14:55 +0800</pubDate><description><![CDATA[在做 react 项目的时候，项目需求中有一个展示家族成员 case 管理的画面，左侧以列表的形式展示成员以及成员相关的case 列表，左侧则是与列表case 时间相对应的图表展示

实现方式如下：
import { useState, useEffect, useRef } from 'react'
import { Link } from 'react-router-dom'
import { generateClient } from 'aws-amplify/api';
import { Drop]]></description><category></category></item><item><title><![CDATA[React 中如何解析字符串中的 html 结构]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/143771520</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/143771520</guid><author>web00_11</author><pubDate>Thu, 14 Nov 2024 15:00:44 +0800</pubDate><description><![CDATA[【代码】React 中如何解析字符串中的 html 结构。]]></description><category></category></item><item><title><![CDATA[模拟机器人逐字回答，类似于实时回话]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/143515487</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/143515487</guid><author>web00_11</author><pubDate>Tue, 05 Nov 2024 17:07:30 +0800</pubDate><description><![CDATA[【代码】模拟机器人逐字回答，类似于实时回话。]]></description><category></category></item><item><title><![CDATA[JavaScript 根据生日计算年龄]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/143489336</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/143489336</guid><author>web00_11</author><pubDate>Mon, 04 Nov 2024 17:19:14 +0800</pubDate><description><![CDATA[【代码】JavaScript 根据生日计算年龄。]]></description><category></category></item><item><title><![CDATA[react-router-dom v6 版本的使用方式以及踩坑]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/143331594</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/143331594</guid><author>web00_11</author><pubDate>Tue, 29 Oct 2024 16:24:56 +0800</pubDate><description><![CDATA[在目前 React 项目中使用 路由，默认安装版本已经升级到版本，相较于 v5 版本 v6 做了哪些改变？使用时有哪些踩坑？]]></description><category></category></item><item><title><![CDATA[前端页面中使用 ppt 功能，并且可以随意插入关键帧]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/142205291</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/142205291</guid><author>web00_11</author><pubDate>Fri, 13 Sep 2024 10:57:39 +0800</pubDate><description><![CDATA[要在前端页面中实现类似 PowerPoint 的功能，并且能够随意插入和控制关键帧动画，你可以使用 HTML、CSS 和 JavaScript 结合的方式来创建一个互动幻灯片系统。以下是一个详细的实现方案，包括如何插入和控制关键帧动画：首先，创建一个基本的 HTML 页面结构，用于展示幻灯片和按钮。

2. JavaScript 实现幻灯片切换和关键帧动画
通过 JavaScript 实现幻灯片的切换，并插入和控制关键帧动画。
3. 高级功能和自定义动画
你可以根据需要添加更多高级功能，比如：如果需要更复杂]]></description><category></category></item><item><title><![CDATA[绝对定位导致内容自动换行问题解决]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/141871208</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/141871208</guid><author>web00_11</author><pubDate>Tue, 03 Sep 2024 20:39:09 +0800</pubDate><description><![CDATA[今天在做一个定位元素的时候遇到一个嵌套定位之后，使用绝对定位的元素的内容自动换行的问题，希望不换行只在一行显示。]]></description><category></category></item><item><title><![CDATA[react 自定义 年-月-日 组件，单独选择年、月、日，并且产生联动]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/140101579</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/140101579</guid><author>web00_11</author><pubDate>Mon, 01 Jul 2024 15:13:59 +0800</pubDate><description><![CDATA[react 自定义 年-月-日 组件，单独选择年、月、日，并且产生联动]]></description><category></category></item><item><title><![CDATA[html + css + js 实现简易轮播图]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/139746857</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/139746857</guid><author>web00_11</author><pubDate>Mon, 17 Jun 2024 16:07:25 +0800</pubDate><description><![CDATA[html + css + javascript 实现简易轮播图]]></description><category></category></item><item><title><![CDATA[前端将当前页面或者页面中某一部分区域保存成 pdf 文件]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/138908711</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/138908711</guid><author>web00_11</author><pubDate>Wed, 15 May 2024 15:10:09 +0800</pubDate><description><![CDATA[前端页面保存成 pdf 文件]]></description><category></category></item><item><title><![CDATA[react 项目中封装 websocket]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/131594626</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/131594626</guid><author>web00_11</author><pubDate>Fri, 07 Jul 2023 13:14:13 +0800</pubDate><description><![CDATA[封装 websocket]]></description><category></category></item><item><title><![CDATA[npm 切换国内淘宝镜像源]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/130049445</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/130049445</guid><author>web00_11</author><pubDate>Sun, 09 Apr 2023 22:39:10 +0800</pubDate><description><![CDATA[【代码】npm 切换国内淘宝镜像源。]]></description><category></category></item><item><title><![CDATA[Vue2 -- 自定义单选内容的单选框组件]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/129862768</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/129862768</guid><author>web00_11</author><pubDate>Thu, 30 Mar 2023 18:00:17 +0800</pubDate><description><![CDATA[之前做的一个项目，在项目中有一个关于人员权限分配的功能，给人员指定各个模块的权限信息，分为项目要求画面中只显示 W  R 两个按钮控制指定权限信息，都不选择的时候权限为 none
效果图]]></description><category></category></item><item><title><![CDATA[vue+elementui 项目 table表格自定义排序规则]]></title><link>https://blog.youkuaiyun.com/web00_11/article/details/127123746</link><guid>https://blog.youkuaiyun.com/web00_11/article/details/127123746</guid><author>web00_11</author><pubDate>Fri, 30 Sep 2022 15:32:44 +0800</pubDate><description><![CDATA[在列中设置 sortable 属性即可实现以该列为基准的排序，接受一个 Boolean，默认为 false。可以通过 Table 的 default-sort 属性设置默认的排序列和排序顺序。可以使用 sort-method 或者 sort-by 使用自定义的排序规则。如果需要后端排序，需将 sortable 设置为 custom，同时在 Table 上监听 sort-change 事件，在事件回调中可以获取当前排序的字段名和排序顺序，从而向接口请求排序后的表格数据。]]></description><category></category></item></channel></rss>