<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[FEE]]></title><description><![CDATA[不积跬步，无以至千里；不积小流，无以成江海。]]></description><link>https://blog.youkuaiyun.com/Randy_Shenyp</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; Randy_Shenyp]]></copyright><item><title><![CDATA[移除Select box focus]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/130947185</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/130947185</guid><author>Randy_Shenyp</author><pubDate>Tue, 30 May 2023 14:20:48 +0800</pubDate><description><![CDATA[在桌面端，为select box添加focus background之后，由于select还处于focus状态，background并不会自动消失![在这里插入图片描述](https://img-blog.csdnimg.cn/c2f7c1aab5aa4e0ca672cd79c2bedf82.png。通过主动触发失焦，可移除当前focus状态。]]></description><category></category></item><item><title><![CDATA[为全面屏iPhone X/XS/XR 创建底部导航栏/底部按钮]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/120202612</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/120202612</guid><author>Randy_Shenyp</author><pubDate>Thu, 09 Sep 2021 17:03:59 +0800</pubDate><description><![CDATA[比较图1和图2-左，可以发现，底部按钮在全面屏中并没有足够的空间去展示，理想情况为图2-右以及图3-左，有足够的填充。

图2-左的情况会导致：

1.用户需要双击才能实现按钮的点击

2.有概率会退出到手机主页

那么如何来解决这个问题，以达到图3的效果？

我们可以通过使用env(safe-area-inset-bottom)来达到额外填充的效果。

padding-bottom:env(safe-area-inset-bottom)

padding-bottom:calc(0.5rem+en...]]></description><category></category></item><item><title><![CDATA[Sublime Text常用快捷键]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/87600292</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/87600292</guid><author>Randy_Shenyp</author><pubDate>Mon, 18 Feb 2019 09:47:18 +0800</pubDate><description><![CDATA[参考：如何优雅地使用Sublime Text

]]></description><category></category></item><item><title><![CDATA[高性能CSS3动画]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/87368385</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/87368385</guid><author>Randy_Shenyp</author><pubDate>Fri, 15 Feb 2019 16:17:20 +0800</pubDate><description><![CDATA[注：本文出自淘宝的元彦，见文前端观察。

高性能移动Web相较PC的场景需要考虑的因素也相对更多更复杂，我们总结为以下几点： 流量、功耗与流畅度。 在PC时代我们更多的是考虑体验上的流畅度，而在Mobile端本身丰富的场景下，需要额外关注对用户基站网络流量使用的情况，设备耗电量的情况。

关于流畅度，主要体现在前端动画中，在现有的前端动画体系中，通常有两种模式：JS动画与CSS3动画。 JS动画是...]]></description><category></category></item><item><title><![CDATA[positon:fixed定位失效]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/87288618</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/87288618</guid><author>Randy_Shenyp</author><pubDate>Thu, 14 Feb 2019 18:19:03 +0800</pubDate><description><![CDATA[positon:fixed---绝对定位
元素将相对于屏幕视口（viewport）的位置来指定其位置，并且元素的位置在屏幕滚动时不会改变。
fixed 属性会创建新的层叠上下文（Stacking Context）。当元素祖先的 transform  属性非 none 时，容器由视口改为该祖先。

Stacking Context---层叠上下文
层叠上下文是HTML元素的三维概念，这些HTML元素...]]></description><category></category></item><item><title><![CDATA[CSS-横向滚动]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/83141869</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/83141869</guid><author>Randy_Shenyp</author><pubDate>Thu, 18 Oct 2018 10:04:24 +0800</pubDate><description><![CDATA[overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;


]]></description><category></category></item><item><title><![CDATA[Video控件的显示与隐藏]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/83026744</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/83026744</guid><author>Randy_Shenyp</author><pubDate>Fri, 12 Oct 2018 14:36:54 +0800</pubDate><description><![CDATA[隐藏控件：
video::-webkit-media-controls-fullscreen-button {
    display: none;
}
video::-webkit-media-controls-play-button {}
video::-webkit-media-controls-timeline {}
video::-webkit-media-controls-curren...]]></description><category></category></item><item><title><![CDATA[media query兼容IE8的CSS Hack]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/81541889</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/81541889</guid><author>Randy_Shenyp</author><pubDate>Thu, 09 Aug 2018 18:16:56 +0800</pubDate><description><![CDATA[针对IE8:

@media \0screen {
    color: #000;
}]]></description><category></category></item><item><title><![CDATA[不定宽块级元素水平居中]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/80223016</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/80223016</guid><author>Randy_Shenyp</author><pubDate>Mon, 07 May 2018 11:10:39 +0800</pubDate><description><![CDATA[传统方法中，要让不定宽元素水平居中，我们一般采取以下结构：



&amp;lt;div class=&quot;more-btn1&quot;&amp;gt;&amp;lt;span&amp;gt;查看更多&amp;lt;/span&amp;gt;&amp;lt;/div&amp;gt;



.more-btn1 {
    text-align: center;
}
.more-btn1 span {
    display: inline-block;
    paddi...]]></description><category></category></item><item><title><![CDATA[jQuery中attr()和prop()的区别]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/80020962</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/80020962</guid><author>Randy_Shenyp</author><pubDate>Fri, 20 Apr 2018 16:44:54 +0800</pubDate><description><![CDATA[在jQuery中，attr()函数和prop()函数都可以用来设置或获取指定的属性，它们的参数和用法几乎相同，但也有它们的不同之处。 




1.操作对象不同

在jQuery中，attr()函数用于设置或获取指定DOM元素所对应的文档节点上的属性(attribute)， 
prop()函数则用于设置或获取指定DOM元素(JS对象，Element类型)上的属性(property)。 




2...]]></description><category></category></item><item><title><![CDATA[jQuery UI sortable使用-拖拽]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79978607</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79978607</guid><author>Randy_Shenyp</author><pubDate>Tue, 17 Apr 2018 18:08:26 +0800</pubDate><description><![CDATA[sortable可实现拖拽以及排序，使用过程中，碰到markdown编辑器的情况，在需要对输入的部分内容进行复制删除操作时，会拖动整个编辑框,可通过cancel选项解决。



$(this).sortable({
    cancel: '.CodeMirror',
});
或者：
// Getter
var cancel = $( &quot;.selector&quot; ).sortable( &quot;option...]]></description><category></category></item><item><title><![CDATA[选择排序-Selection Sort]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79964273</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79964273</guid><author>Randy_Shenyp</author><pubDate>Mon, 16 Apr 2018 18:15:55 +0800</pubDate><description><![CDATA[选择排序（Selection Sort）是一种简单直观的排序算法。它的工作原理如下，首先在未排序序列中找到最小（大）元素，存放到排序序列的起始位置，然后，再从剩余未排序元素中继续寻找最小（大）元素，然后放到已排序序列的末尾。以此类推，直到所有元素均排序完毕。

选择排序的主要优点与数据移动有关。如果某个元素位于正确的最终位置上，则它不会被移动。选择排序每次交换一对元素，它们当中至少有一个将被移到其...]]></description><category></category></item><item><title><![CDATA[快速排序-Quicksort]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79917790</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79917790</guid><author>Randy_Shenyp</author><pubDate>Thu, 12 Apr 2018 18:04:04 +0800</pubDate><description><![CDATA[快速排序（Quicksort），又称划分交换排序，简称快排！

基本思想： 
1.数据集中，选择一个元素作为基准(pivot)元素 
2.所有小于基准的元素，移到基准的左边，大于的则移到基准的右边，这一操作可称为分区(partition) 
3.对基准元素左右两边的两个子集，重复步骤1和步骤2，直到所有子集只剩下一个元素为止。



    function quickSort(array) {
...]]></description><category></category></item><item><title><![CDATA[CSS关键字initial、inherit和unset]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79585229</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79585229</guid><author>Randy_Shenyp</author><pubDate>Mon, 19 Mar 2018 15:51:42 +0800</pubDate><description><![CDATA[对于position的取值，常见的有：static、relative、absolute 和 fixed，还有较少被关注到的：initial,inherit和unset。

1.initial 
可用于设置 CSS 属性为它的默认值，可作用于任何 CSS 样式（IE不支持该关键字）

2.inherit 
可继承属性，从父元素那获取对应属性的经过计算与转换的值，如果父元素没有，则向上查找，直到使用浏...]]></description><category></category></item><item><title><![CDATA[获取元素CSS值之getComputedStyle、currentStyle、style]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79426011</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79426011</guid><author>Randy_Shenyp</author><pubDate>Fri, 02 Mar 2018 18:08:12 +0800</pubDate><description><![CDATA[1.getComputedStyle

通过getComputedStyle可以获取当前元素所有最终使用的CSS属性值，返回的样式是一个实时的 CSSStyleDeclaration 对象，当元素的样式更改时，它会自动更新本身。(只读！)

语法：



var style = window.getComputedStyle(element, [pseudoElt]);

element:用于获取...]]></description><category></category></item><item><title><![CDATA[Vue中ref与$refs的使用]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79132133</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79132133</guid><author>Randy_Shenyp</author><pubDate>Mon, 22 Jan 2018 18:25:33 +0800</pubDate><description><![CDATA[ref 被用来给元素或子组件注册引用信息，引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是DOM 元素；如果用在子组件上，引用就指向组件实例。


1.DOM元素上使用



template>
    div class="edit-input" :class="{'edit-input-show': is_edit}">
         inp]]></description><category></category></item><item><title><![CDATA[JSON.stringify()结合localStorage]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79097121</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79097121</guid><author>Randy_Shenyp</author><pubDate>Thu, 18 Jan 2018 15:44:20 +0800</pubDate><description><![CDATA[JSON.parse() 方法用来解析JSON字符串，构造由字符串描述的JavaScript值或对象 
  JSON.stringify() 方法是将一个JavaScript值(对象或者数组)转换为一个 JSON字符串


当我们想存储用户创建的一个对象，并且，即使在浏览器被关闭后仍能恢复该对象时：

var localEvent = function (item) {
    this.get]]></description><category></category></item><item><title><![CDATA[正则匹配：[^]和\n]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79037019</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79037019</guid><author>Randy_Shenyp</author><pubDate>Thu, 11 Jan 2018 17:59:19 +0800</pubDate><description><![CDATA[我们知道. 可以匹配除了换行符（\n）以外的任意一个字符 = [^\n]， 
那[^]的作用是什么？ 
先看看下面这段代码：找出重复字符的个数



function duplicateCount(text) {
    return (text.split('').sort().join('').match(/([^])\1+/g)).length;
}


([^])捕获任何字符
\1+跟着一]]></description><category></category></item><item><title><![CDATA[String的常用方法]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79021821</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/79021821</guid><author>Randy_Shenyp</author><pubDate>Wed, 10 Jan 2018 11:31:41 +0800</pubDate><description><![CDATA[1.substring()返回一个字符串在开始索引到结束索引之间的一个子集, 或从开始索引直到字符串的末尾的一个子集。

语法：str.substring(indexStart[, indexEnd]) 
提取从 indexStart 到 indexEnd（不包括）之间的字符


如果 indexStart 等于 indexEnd，substring 返回一个空字符串。
如果省略 indexEnd]]></description><category></category></item><item><title><![CDATA[金钱格式化]]></title><link>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/78933306</link><guid>https://blog.youkuaiyun.com/Randy_Shenyp/article/details/78933306</guid><author>Randy_Shenyp</author><pubDate>Fri, 29 Dec 2017 16:59:49 +0800</pubDate><description><![CDATA[一、正则

var test1 = '123565456.89';
var format = test1.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
console.log(format);//"123,565,456.89"

1.\B匹配边界 
2.?=(\d{3})+表示必须是1个或多个的3个连续数字 
3.(?!\d)表示除数字外的任意字符，即匹配到数字以]]></description><category></category></item></channel></rss>