整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
当你需要要生成一个0-99的数组
方案1
方案2
当你有一个数组，你需要打乱这个数组的排序
当你需要将数组中的所有重复的元素只保留一个
根据唯一值对数组进行去重
当你需要取多个数组中的交集
但你需要找到一个数组中的最大值的索引
当你需要找到一个数组中的最小值的索引
当你需要在一个数组中找到一个最接近的值
当你需要将多个数组压缩成一个数组
当你需要将一个矩阵的行和列进行互相交换
将10进制转换成n进制，可以使用toString(n)
将n进制转换成10进制，可以使用parseInt(num, n)
当你需要将手机号码格式化成xxx-xxxx-xxxx的形式
当你需要将一段文本中的多个空格合并成一个空格
如果你需要将页面翻到最顶部
如果你希望将一个元素顺滑的滚动到可视区域的起点
如果你希望将一个元素顺滑的滚动到可视区域的终点
当你需要跳转到其他页面
当你需要复制文本到粘贴板上
日期
判断日期是否为今天
当你需要将日期转换为为 YYYY-MM-DD 格式
当你需要将秒数转换为 hh:mm:ss 格式
当你需要获取某年某月的第一天
当你需要获取某年某月的最后一天
当你需要获取某年某个月份的总天数
函数
异步函数判断
判断一个函数是否属于异步函数
数字
截断数字
当你需要将小数点后的某些数字截断而不取四舍五入
当你需要将小数点后的某些数字截断，并取四舍五入
补零
当你需要在一个数字num不足len位数的时候前面补零操作
对象
删除无效属性
当你需要删除一个对象中的属性值为null或undefined的所有属性
当你需要将一串字符串比如'{name: "jack"}'转换成对象时，直接使用JSON.parse将会报错。
其他
比较两个对象
当你需要比较两个对象，js的等于只能判断对象的地址是否相同，当地址不相同的时候无法判断两个对象的键值对是否一致。
当你需要等待一段时间，但又不想写在setTimeout函数中，造成回调地狱
SS的颜色值有3种表示方式，为十六进制、RGB、颜色名称，用代码表示分别为：
color : #345456;
color : rgb(255,152,10);
color : red;
平时在编写CSS代码时，在设置颜色值时使用的最多的方式是十六进制。如果要对颜色值进行计算，就必须将十六进制的颜色值转换成RGB模式。那么如何进行转换呢？
别急，先来看看十六进制的颜色值和RGB颜色值之间的对应关系。比如上面的十六进制的颜色值：#345456，其中的前2位“34”对应R，中间2位“54”对应G，最后2位“56”对应B，有了这个对应关系那么剩下的就是进制转换的事了。
javascript中使用parseInt()方法可以将将第二个参数设置成16就可以将十六进制转换成十进制。需要注意的是，CSS中的十六进制颜色值支持简写，在转换的过程中要考虑到简写的处理办法。
下面是我写的一个将十六进制的颜色值转换成RGB的函数，该函数接受一个十六进制或RGB的CSS颜色值，返回的是一个包含了r、g、b三个颜色值的对象，这样就可以很方便的对颜色值进行计算了。
view sourceprint?
var parseColor = function( val ){
var r, g, b;
// 参数为RGB模式时不做进制转换，直接截取字符串即可
if( /rgb/.test(val) ){
var arr = val.match( /\d+/g );
r = parseInt( arr[0] );
g = parseInt( arr[1] );
b = parseInt( arr[2] );
}
// 参数为十六进制时需要做进制转换
else if( /#/.test(val) ){
var len = val.length;
// 非简写模式 #0066cc
if( len === 7 ){
r = parseInt( val.slice(1, 3), 16 );
g = parseInt( val.slice(3, 5), 16 );
b = parseInt( val.slice(5), 16 );
}
// 简写模式 #06c
else if( len === 4 ){
r = parseInt( val.charAt(1) + val.charAt(1), 16 );
g = parseInt( val.charAt(2) + val.charAt(2), 16 );
b = parseInt( val.charAt(3) + val.charAt(3), 16 );
}
}
else{
return val;
}
return {
r : r,
g : g,
b : b
}
};
下面是调用结果：
parseColor( '#009652' ); // { r = 0, g = 150, b = 82 }
parseColor( '#06c' ); // { r = 0, g = 102, b = 204 }
parseColor( 'rgb(255,10,102)' ); // { r = 255, g = 10, b = 102 }
文章地址：peixun.qietu.com
文/丁向明
做一个有博客的web前端自媒体人，专注web前端开发，关注用户体验，加我qq/微信交流：6135833
http://dingxiangming.com
，下面一个很有意思的 UI 效果：
主要看看这个页面的背景，一个磨砂（毛玻璃）质感效果的渐变背景图，看上去是比较高级的。
剥离掉页面的内容元素，只剩下背景的话，大概是这样：
一开始是打算切图实现的，但是仔细一想，这个效果使用 CSS 其实也可以非常轻松制作出来。本文就讨论讨论：
上述背景效果看似复杂，其实非常的简单。它就是：
多块不规则渐变背景 + 高斯模糊蒙版
在 CSS 中，也就是借助 background + backdrop-filter: blur() 即可实现。
去掉叠在上方的 高斯模糊蒙版，背后的元素其实非常简单明了。可能就是只是这样：
这里简单列下代码，我们使用了 3 个 div 实现了 3 个渐变图，每个图形再使用 clip-path 随机裁剪成不规则的多边形：
<div class="g-bg">
<div class="g-polygon g-polygon-1"></div>
<div class="g-polygon g-polygon-2"></div>
<div class="g-polygon g-polygon-3"></div>
</div>
.g-polygon {
position: absolute;
opacity: .5;
}
.g-polygon-1 {
// 定位代码，容器高宽随意
background: #ffee55;
clip-path: polygon(0 10%, 30% 0, 100% 40%, 70% 100%, 20% 90%);
}
.g-polygon-2 {
// 定位代码，容器高宽随意
background: #E950D1;
clip-path: polygon(10% 0, 100% 70%, 100% 100%, 20% 90%);
}
.g-polygon-3 {
// 定位代码，容器高宽随意
background: rgba(87, 80, 233);
clip-path: polygon(80% 0, 100% 70%, 100% 100%, 20% 90%);
}
接下来，这一步最为关键，就是使用 backdrop-filter 实现高斯模糊蒙版。叠在上述几个元素上方即可，最关键的一行代码 backdrop-filter: blur(150px)
.g-bg::before {
content: "";
position: fixed;
top: 0; left: 0; bottom: 0; right: 0;
backdrop-filter: blur(150px);
z-index: 1;
}
}
这样，我们就实现了如上图所示的毛玻璃质感效果的渐变背景图：
录制的 Gif 图看上去有点糊，你可以戳这里点进 DEMO 查看 -- CodePen Demo -- Frosted glass background effect[1]
注意，这里使用的是 backdrop-filter: blur()，而不是 filter: blur()，如果你对这两个滤镜是使用选择还有所疑惑，可以看看的我的这篇文章讲解 -- 深入探讨 filter 与 backdrop-filter 的异同[2]
简单了解了原理之后，我们就可以借助 CSS-doodle 尝试批量来生成这个效果了。
CSS-doodle 它是一个基于 Web-Component 的库。允许我们快速的创建基于 CSS Grid 布局的页面，并且提供各种便捷的指令及函数（随机、循环等等），让我们能通过一套规则，得到不同 CSS 效果。感兴趣的可以猛击官网了解 -- CSS-doodle[3]
代码非常简单，也非常好理解，就是随机场景不同尺寸、不同定位、不同颜色、不同形式的几个图形：
<css-doodle>
:doodle {
@grid: 1x8 / 100vmin;
}
@place-cell: center;
width: @rand(40vmin, 80vmin);
height: @rand(40vmin, 80vmin);
transform: translate(@rand(-200%, 200%), @rand(-60%, 60%)) scale(@rand(.8, 1.8)) skew(@rand(45deg));
clip-path: polygon(
@r(0, 30%) @r(0, 50%),
@r(30%, 60%) @r(0%, 30%),
@r(60%, 100%) @r(0%, 50%),
@r(60%, 100%) @r(50%, 100%),
@r(30%, 60%) @r(60%, 100%),
@r(0, 30%) @r(60%, 100%)
);
background: @pick(#f44336, #e91e63, #9c27b0, #673ab7, #3f51b5, #60569e, #e6437d, #ebbf4d, #00bcd4, #03a9f4, #2196f3, #009688, #5ee463, #f8e645, #ffc107, #ff5722, #43f8bf);
opacity: @rand(.3, .8);
</css-doodle>
上述代码会随机生成这样的图案（GIF 看不出鼠标的点击效果，每次切换是我点击页面进行的手动切换）：
好，配合上蒙版，再看看效果，我们已经能够批量的去生成上述的背景效果了：
如果需求，配合上 hue-rotate 及简单的位移，我们甚至可以让这个渐变背景动画动起来，更加生动些：
<css-doodle>
// 同上...
position: relative;
top: @rand(-80%, 80%);
left: @rand(-80%, 80%);
animation: colorChange @rand(6.1s, 16.1s) infinite @rand(-.5s, -2.5s) linear alternate;
@keyframes colorChange {
100% {
left: 0;
top: 0;
filter: hue-rotate(360deg);
}
}
</css-doodle>
这样，我们就得到了带动画的毛玻璃渐变背景：
GIF 截图效果较差，完整的代码及效果体验你可以猛击这里 -- CodePen Demo -- CSS-doodle Pure CSS Background Effect[4]
好了，本文到此结束，希望本文对你有所帮助 :)
如果还有什么疑问或者建议，可以多多交流，原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
[1]
CodePen Demo -- Frosted glass background effect: https://codepen.io/Chokcoco/pen/mdBKgOK
[2]
深入探讨 filter 与 backdrop-filter 的异同: https://github.com/chokcoco/iCSS/issues/147
[3]
CSS-doodle: https://css-doodle.com/
[4]
CodePen Demo -- CSS-doodle Pure CSS Background Effect: https://codepen.io/Chokcoco/pen/gOGKNMm
作者:SbCo
来源-微信公众号:iCSS前端趣闻
出处:https://mp.weixin.qq.com/s/iVeRwoaJ-cZhe4Z0xp7OiQ
*请认真填写需求信息，我们会在24小时内与您取得联系。
