<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[SB52220的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/SB52220</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; SB52220]]></copyright><item><title><![CDATA[公告、新闻列表-上下无限滚动（css+animation）]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/148709930</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/148709930</guid><author>SB52220</author><pubDate>Tue, 17 Jun 2025 10:26:19 +0800</pubDate><description><![CDATA[代码实现了一个无限循环滚动的列表效果。通过v-for指令将tipList数组循环渲染两次，并使用CSS动画让列表向上滚动。设置.content容器高度固定并隐藏溢出，.listBox使用绝对定位和scrollUp动画，在25秒内从0%滚动到-50%位置，形成无缝循环的视觉效果。关键点包括：双列表渲染保证内容连续、translateY(-50%)实现半屏滚动、infinite参数使动画无限循环。]]></description><category></category></item><item><title><![CDATA[实现一个深拷贝方法]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/145704040</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/145704040</guid><author>SB52220</author><pubDate>Tue, 18 Feb 2025 13:52:41 +0800</pubDate><description><![CDATA[js深拷贝、递归处理数据]]></description><category></category></item><item><title><![CDATA[表单数字、邮箱、手机号码、银行账号、身份证、账号密码校验方法：数字最大值、只能数字、小数位数，号码校验长度]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/145315763</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/145315763</guid><author>SB52220</author><pubDate>Thu, 23 Jan 2025 09:41:23 +0800</pubDate><description><![CDATA[js表达数据校验、js正则表达式、JavaScript表单字段校验、邮箱校验、js手机号码校验、js银行账号校验、身份证校验、账号密码校验方法：js数字最大值、只能数字、js控制输入小数位数]]></description><category></category></item><item><title><![CDATA[vue3组件通讯、组件间数据传输]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/144949465</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/144949465</guid><author>SB52220</author><pubDate>Thu, 09 Jan 2025 23:29:13 +0800</pubDate><description><![CDATA[2.自定义事件传递——子传父（emit、deFineEmits）1.props，父传子、子传父--（使用频率最高）3.任意组件之间通讯——mitt。]]></description><category></category></item><item><title><![CDATA[数组对象、多维对象、数组去重（学到就更新^_^）]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/144851311</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/144851311</guid><author>SB52220</author><pubDate>Tue, 31 Dec 2024 15:36:57 +0800</pubDate><description><![CDATA[数组对象、多维对象、数据处理方法，ES6语法，JavaScript语法优化，前端数据处理优化，前端数据处理代码简写]]></description><category></category></item><item><title><![CDATA[elementUI-select,下拉筛选面板加搜索框、模糊查询]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/144720338</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/144720338</guid><author>SB52220</author><pubDate>Wed, 25 Dec 2024 15:34:56 +0800</pubDate><description><![CDATA[下拉筛选框加搜索功能，下拉选项面板加搜索功能、下拉选择+模糊查询、elementui select下拉选项面板增加模糊搜索；]]></description><category></category></item><item><title><![CDATA[elementui-table，多列合并、动态并行，多行合并源码、思路]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/144659305</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/144659305</guid><author>SB52220</author><pubDate>Mon, 23 Dec 2024 11:12:45 +0800</pubDate><description><![CDATA[element-ui table 动态合并行，element-ui table 多行合并行，element-ui table 复杂合并行，element-ui table 合并行的数据出里，数组对象格式初始化处理]]></description><category></category></item><item><title><![CDATA[new Date()—今天、本周、本月、本年]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/144630514</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/144630514</guid><author>SB52220</author><pubDate>Sat, 21 Dec 2024 14:16:30 +0800</pubDate><description><![CDATA[new date(),处理时间戳转日期格式，本年本月本周本日，]]></description><category></category></item><item><title><![CDATA[vue3-setup语法-实时监听-内部dom的宽度-尺寸变化，方法：new ResizeObserver(）]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/144628993</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/144628993</guid><author>SB52220</author><pubDate>Sat, 21 Dec 2024 12:05:30 +0800</pubDate><description><![CDATA[vue，setup语法，实时监听dom元素宽度变化，监听组件内部元素变化；ResizeObserver(）]]></description><category></category></item><item><title><![CDATA[遍历对象方法for...in，递归，Object.keys]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/144559110</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/144559110</guid><author>SB52220</author><pubDate>Wed, 18 Dec 2024 13:45:27 +0800</pubDate><description><![CDATA[遍历对象方法for...in，递归，Object.keys]]></description><category></category></item><item><title><![CDATA[修改新数组，不改变原数组]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/124636605</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/124636605</guid><author>SB52220</author><pubDate>Sat, 07 May 2022 18:08:20 +0800</pubDate><description><![CDATA[1.遍历旧数组，push到新数组。

2.使用concat空数组生成新数组。

3.slice从头到尾
]]></description><category></category></item><item><title><![CDATA[小程序滑动弹窗 CSS3 实现]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/123469130</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/123469130</guid><author>SB52220</author><pubDate>Sun, 13 Mar 2022 23:48:56 +0800</pubDate><description><![CDATA[.up{
 animation: up .7s;
}
.down{
 animation: down 1s;
}
@keyframes up
{
 0% { transform: translateY(1000vh); }
 100% { transform: translateY(0); }
}
@keyframes down
{
 0% { transform: translateY(0); }
 100% { transform: translateY(1000vh); }
}

使用变量...]]></description><category></category></item><item><title><![CDATA[正则表达式(不大全)]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/78458241</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/78458241</guid><author>SB52220</author><pubDate>Mon, 06 Nov 2017 15:34:58 +0800</pubDate><description><![CDATA[验证数字：^[0-9]*$

验证n位的数字：^\d{n}$

验证至少n位数字：^\d{n,}$

验证m-n位的数字：^\d{m,n}$

验证零和非零开头的数字：^(0|[1-9][0-9]*)$

验证有两位小数的正实数：^[0-9]+(.[0-9]{2})?$

验证有1-3位小数的正实数：^[0-9]+(.[0-9]{1,3})?$

验证非零的正整数：^\]]></description><category></category></item><item><title><![CDATA[js验证开始时间和结束时间 结束时间不能比开始时间早]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/78202861</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/78202861</guid><author>SB52220</author><pubDate>Wed, 11 Oct 2017 13:53:52 +0800</pubDate><description><![CDATA[js验证开始时间和结束时间 结束时间不能比开始时间早]]></description><category></category></item><item><title><![CDATA[jquery简单tab切换 源码]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/78173299</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/78173299</guid><author>SB52220</author><pubDate>Sun, 08 Oct 2017 09:56:18 +0800</pubDate><description><![CDATA[实现tab切换js有好几种方法，但要写成可复用性高、简单的我认为是jq写的。以下是源码： 
HTML<section>
    <nav id="nav">
      <a class="on">tab1</a>
      <a>tab2</a>
      <a>tab3</a>
      <a>tab4</a>
    </nav>
    <div id="contentBox">]]></description><category></category></item><item><title><![CDATA[简单HTML5 拖拽源码]]></title><link>https://blog.youkuaiyun.com/SB52220/article/details/78168675</link><guid>https://blog.youkuaiyun.com/SB52220/article/details/78168675</guid><author>SB52220</author><pubDate>Sat, 07 Oct 2017 11:21:33 +0800</pubDate><description><![CDATA[总结：①被拖拽和放置拖拽内容的容器都需要id；②被拖拽内容设置draggable=“true”，ondragstart=”dragStart(event)”记录拖拽。③容器需要ondragover=“allowDrag(event)”ondrop=”drop(event)”。HTML<div id="dragTxt" draggable="true" ondragstart="dragStart(e]]></description><category></category></item></channel></rss>