js小眾且好用的技巧「一行代碼」

組

生成數(shù)組

當(dāng)你需要要生成一個0-99的數(shù)組
方案1

方案2

打亂數(shù)組

當(dāng)你有一個數(shù)組，你需要打亂這個數(shù)組的排序

數(shù)組簡單數(shù)據(jù)去重

當(dāng)你需要將數(shù)組中的所有重復(fù)的元素只保留一個

數(shù)組唯一值數(shù)據(jù)去重

根據(jù)唯一值對數(shù)組進行去重

多數(shù)組取交集

當(dāng)你需要取多個數(shù)組中的交集

查找最大值索引

但你需要找到一個數(shù)組中的最大值的索引

查找最小值索引

當(dāng)你需要找到一個數(shù)組中的最小值的索引

找到最接近的數(shù)值

當(dāng)你需要在一個數(shù)組中找到一個最接近的值

壓縮多個數(shù)組

當(dāng)你需要將多個數(shù)組壓縮成一個數(shù)組

矩陣交換行和列

當(dāng)你需要將一個矩陣的行和列進行互相交換

數(shù)字轉(zhuǎn)換

進制轉(zhuǎn)換

將10進制轉(zhuǎn)換成n進制，可以使用toString(n)

將n進制轉(zhuǎn)換成10進制，可以使用parseInt(num, n)

正則

手機號格式化

當(dāng)你需要將手機號碼格式化成xxx-xxxx-xxxx的形式

去除多余空格

當(dāng)你需要將一段文本中的多個空格合并成一個空格

web

重新加載當(dāng)前頁面

滾動到頁面頂部

如果你需要將頁面翻到最頂部

元素滾動

如果你希望將一個元素順滑的滾動到可視區(qū)域的起點

如果你希望將一個元素順滑的滾動到可視區(qū)域的終點

檢查當(dāng)前是否IE瀏覽器

從給定文本中剝離html

當(dāng)你需要在某個文本中將里面的標簽全部過濾掉

重定向

當(dāng)你需要跳轉(zhuǎn)到其他頁面

文本粘貼

當(dāng)你需要復(fù)制文本到粘貼板上

日期

判斷日期是否為今天

日期轉(zhuǎn)換

當(dāng)你需要將日期轉(zhuǎn)換為為 YYYY-MM-DD 格式

秒數(shù)轉(zhuǎn)換

當(dāng)你需要將秒數(shù)轉(zhuǎn)換為 hh:mm:ss 格式

獲取某年某月的第一天

當(dāng)你需要獲取某年某月的第一天

獲取某年某月的最后一天

當(dāng)你需要獲取某年某月的最后一天

獲取某年月份天數(shù)

當(dāng)你需要獲取某年某個月份的總天數(shù)

函數(shù)

異步函數(shù)判斷

判斷一個函數(shù)是否屬于異步函數(shù)

數(shù)字

截斷數(shù)字

當(dāng)你需要將小數(shù)點后的某些數(shù)字截斷而不取四舍五入

四舍五入

當(dāng)你需要將小數(shù)點后的某些數(shù)字截斷，并取四舍五入

補零

當(dāng)你需要在一個數(shù)字num不足len位數(shù)的時候前面補零操作

對象

刪除無效屬性

當(dāng)你需要刪除一個對象中的屬性值為null或undefined的所有屬性

反轉(zhuǎn)對象鍵值

當(dāng)你需要將對象的鍵值對交換

字符串轉(zhuǎn)對象

當(dāng)你需要將一串字符串比如'{name: "jack"}'轉(zhuǎn)換成對象時，直接使用JSON.parse將會報錯。

其他

比較兩個對象

當(dāng)你需要比較兩個對象，js的等于只能判斷對象的地址是否相同，當(dāng)?shù)刂凡幌嗤臅r候無法判斷兩個對象的鍵值對是否一致。

隨機顏色生成

當(dāng)你需要獲取一個隨機顏色

顏色格式轉(zhuǎn)換

當(dāng)你需要將16進制的顏色轉(zhuǎn)換成rgb

獲取隨機ip

當(dāng)你需要生成一個ip地址

uuid

當(dāng)你需要生成一個id

獲取cookie

當(dāng)你需要將cookie轉(zhuǎn)換成對象

強制等待

當(dāng)你需要等待一段時間，但又不想寫在setTimeout函數(shù)中，造成回調(diào)地獄

SS的顏色值有3種表示方式，為十六進制、RGB、顏色名稱，用代碼表示分別為：

color : #345456;

color : rgb(255,152,10);

color : red;

平時在編寫CSS代碼時，在設(shè)置顏色值時使用的最多的方式是十六進制。如果要對顏色值進行計算，就必須將十六進制的顏色值轉(zhuǎn)換成RGB模式。那么如何進行轉(zhuǎn)換呢？

別急，先來看看十六進制的顏色值和RGB顏色值之間的對應(yīng)關(guān)系。比如上面的十六進制的顏色值：#345456，其中的前2位“34”對應(yīng)R，中間2位“54”對應(yīng)G，最后2位“56”對應(yīng)B，有了這個對應(yīng)關(guān)系那么剩下的就是進制轉(zhuǎn)換的事了。

javascript中使用parseInt()方法可以將將第二個參數(shù)設(shè)置成16就可以將十六進制轉(zhuǎn)換成十進制。需要注意的是，CSS中的十六進制顏色值支持簡寫，在轉(zhuǎn)換的過程中要考慮到簡寫的處理辦法。

下面是我寫的一個將十六進制的顏色值轉(zhuǎn)換成RGB的函數(shù)，該函數(shù)接受一個十六進制或RGB的CSS顏色值，返回的是一個包含了r、g、b三個顏色值的對象，這樣就可以很方便的對顏色值進行計算了。

view sourceprint?

var parseColor = function( val ){

var r, g, b;

// 參數(shù)為RGB模式時不做進制轉(zhuǎn)換，直接截取字符串即可

if( /rgb/.test(val) ){

var arr = val.match( /\d+/g );

r = parseInt( arr[0] );

g = parseInt( arr[1] );

b = parseInt( arr[2] );

}

// 參數(shù)為十六進制時需要做進制轉(zhuǎn)換

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

}

};

下面是調(diào)用結(jié)果：

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前端開發(fā)，關(guān)注用戶體驗，加我qq/微信交流：6135833

http://dingxiangming.com

，下面一個很有意思的 UI 效果：

主要看看這個頁面的背景，一個磨砂（毛玻璃）質(zhì)感效果的漸變背景圖，看上去是比較高級的。

剝離掉頁面的內(nèi)容元素，只剩下背景的話，大概是這樣：

一開始是打算切圖實現(xiàn)的，但是仔細一想，這個效果使用 CSS 其實也可以非常輕松制作出來。本文就討論討論：

使用 CSS 如何制作如上所示磨砂（毛玻璃）質(zhì)感效果的漸變背景圖
如何借助 CSS-doodle 工具，批量產(chǎn)生該效果圖，并且附帶動畫效果

實現(xiàn)漸變圖

上述背景效果看似復(fù)雜，其實非常的簡單。它就是：

多塊不規(guī)則漸變背景 + 高斯模糊蒙版

在 CSS 中，也就是借助 background + backdrop-filter: blur() 即可實現(xiàn)。

去掉疊在上方的 高斯模糊蒙版，背后的元素其實非常簡單明了。可能就是只是這樣：

這里簡單列下代碼，我們使用了 3 個 div 實現(xiàn)了 3 個漸變圖，每個圖形再使用 clip-path 隨機裁剪成不規(guī)則的多邊形：

<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 實現(xiàn)高斯模糊蒙版

接下來，這一步最為關(guān)鍵，就是使用 backdrop-filter 實現(xiàn)高斯模糊蒙版。疊在上述幾個元素上方即可，最關(guān)鍵的一行代碼 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;
    }
}

這樣，我們就實現(xiàn)了如上圖所示的毛玻璃質(zhì)感效果的漸變背景圖：

錄制的 Gif 圖看上去有點糊，你可以戳這里點進 DEMO 查看 -- CodePen Demo -- Frosted glass background effect[1]

注意，這里使用的是 backdrop-filter: blur()，而不是 filter: blur()，如果你對這兩個濾鏡是使用選擇還有所疑惑，可以看看的我的這篇文章講解 -- 深入探討 filter 與 backdrop-filter 的異同[2]

借助 CSS-doodle 工具，批量產(chǎn)生該效果

簡單了解了原理之后，我們就可以借助 CSS-doodle 嘗試批量來生成這個效果了。

CSS-doodle 它是一個基于 Web-Component 的庫。允許我們快速的創(chuàng)建基于 CSS Grid 布局的頁面，并且提供各種便捷的指令及函數(shù)（隨機、循環(huán)等等），讓我們能通過一套規(guī)則，得到不同 CSS 效果。感興趣的可以猛擊官網(wǎng)了解 -- 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 看不出鼠標的點擊效果，每次切換是我點擊頁面進行的手動切換）：

好，配合上蒙版，再看看效果，我們已經(jīng)能夠批量的去生成上述的背景效果了：

如果需求，配合上 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 截圖效果較差，完整的代碼及效果體驗?zāi)憧梢悦蛽暨@里 -- CodePen Demo -- CSS-doodle Pure CSS Background Effect[4]

最后

好了，本文到此結(jié)束，希望本文對你有所幫助 :)

如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。

參考資料

[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

在線咨詢

上一篇：一些很實用的JavaScript函數(shù)封裝集合(ES6)
下一篇：Github上開源的10大Javascript模板引擎，助力前端開發(fā)

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商