. CSS3 Patterns Gallery

這18個網(wǎng)站是我在取經(jīng)路上意外發(fā)現(xiàn)的，里面包括 純CSS 實現(xiàn)的炫酷背景，還有專門制作背景圖的網(wǎng)站。 算是取經(jīng)路上的大補之物~

? 傳送門：https://projects.verou.me/css3patterns/

如果你認(rèn)識 Lea Verou 的話，大概率知道這個網(wǎng)站，她徒手寫了幾十個 純CSS 實現(xiàn)的背景圖樣式。 網(wǎng)站上提供了她的代碼。
如果你不認(rèn)識她，那我一定要推薦你閱讀一下 《CSS揭秘（圖靈出品）》 這本書，它會讓你大受震撼！

2. CSS3 Gradients

? 傳送門：http://www.standardista.com/cssgradients/

除了 Lea Verou 的網(wǎng)站外，CSS3 Gradients 也提供了這類示例。同樣提供代碼下載。

3. CSS Gradients with background-blend-mode

? 傳送門：https://bennettfeely.com/gradients/

功能和前面兩個差不多，自己點開看看唄~

4. CSS Flags

? 傳送門：http://www.standardista.com/CSS3gradients/flags.html

使用 純CSS 的方式畫出多國國旗。“右鍵 - 檢查網(wǎng)頁源代碼” 可以獲取代碼。

5. Hero Patterns

? 傳送門：https://heropatterns.com/

Hero Patterns 是比較出名網(wǎng)站了，官方提供了幾十款紋理，你可以根據(jù)自己的需求設(shè)置兩種對比色和不透明度。 完成后會返回一段CSS代碼給你，不過和前面幾個網(wǎng)站有點不同的是，Hero Patterns 的背景圖使用了 base64 的方式去實現(xiàn)的，而不是 CSS 背景漸變 的方式。

6. HUE.CSS

? 傳送門：http://evankarageorgos.github.io/hue/grid.html

使用 CSS 背景漸變 的方式做出的數(shù)十款高端大氣的背景，網(wǎng)站上的所有案例都提供了代碼。

7. Pure CSS Stripes Generator

? 傳送門：https://stripesgenerator.com/

Pure CSS Stripes Generator 主要是幫你生成 條紋背景 的代碼。 你可以在網(wǎng)站上根據(jù)自己的需求設(shè)置條紋的顏色、大小、傾斜角度等屬性。 最后會返回一段 css 代碼給你。

8. Glass Morphism

? 傳送門：https://glassgenerator.netlify.app/

Glass Morphism 的功能是設(shè)置 毛玻璃背景 樣式，你可以在上面手動調(diào)節(jié)毛玻璃的不透明度、模糊度、背景色等屬性。 最后會返回 html 和 css 代碼給你。 非常好玩，趕緊去試試吧~

9. uiGradients

? 傳送門：https://uigradients.com/

提供了不同色系搭配的漸變代碼。如果你不太擅長配色，可以使用 uiGradients

10. Gradient Colors Collection Palette

? 傳送門：https://webkul.github.io/coolhue/

Gradient Colors Collection Palette 上有幾十個色卡，可以一鍵復(fù)制 css 代碼。

11. Fresh Background Gradients

? 傳送門：https://webgradients.com/

Fresh Background Gradients 提供了即使個配色方案，有雙色的，也有多色的。同樣提供一鍵復(fù)制 css 代碼。

12. Cool Backgrounds

? 傳送門：https://coolbackgrounds.io/

可以生成 5種類型 的背景圖片，并且提供多套成熟的配色方案供你選擇。 但該網(wǎng)站生成的是背景圖片，不是代碼。

13. Svg Wave

? 傳送門：https://svgwave.in/

生成波浪背景圖，可以自定義波浪的幅度、顏色等屬性。 支持 SVG 和 PNG 下載。

14. Subtle Patterns

? 傳送門：https://www.toptal.com/designers/subtlepatterns/

提供了幾十種紋理圖。

15. Stripe Generator

? 傳送門：http://www.stripegenerator.com/

可配置的條紋背景圖片。

16. ZenBG

? 傳送門：https://galactic.ink/bg/

在線設(shè)置紋理背景和漸變顏色，最后融合在一起生成一張好看的圖片。 同時還提供 css 代碼給你參考，告訴你如何更好的使用這張圖片。

17. Patterninja

? 傳送門：https://patterninja.com/

光看圖片介紹就知道這個網(wǎng)站好好玩。 Patterninja 幫你生成可平鋪的背景圖。

18. The Pattern Library

? 傳送門：http://thepatternlibrary.com/

提供幾十款可平鋪的好看背景。 注意：下載按鈕在網(wǎng)頁的左上角。

.檢查元素是否在屏幕可見區(qū)域內(nèi)

我們?nèi)绾潍@得元素的點擊率？

主要取決于用戶點擊元素的次數(shù)和元素在頁面上顯示的次數(shù)。

我們可以很容易地獲取到用戶的點擊次數(shù)，但是如何獲取一個元素的顯示次數(shù)呢？

我們可以通過IntersectionObserver輕松實現(xiàn)，大家可以點擊codepen體驗一下實際效果。

<div class="tips">box is visible</div>
<div class="box">box</div>
<script>
  const $tips=document.querySelector('.tips')
  const callback=(entries)=> {
    entries.forEach((entry)=> {
      console.log(entry.intersectionRatio)
      if (entry.intersectionRatio > 0) {
        $tips.innerHTML='box is visible'
      } else if (entry.intersectionRatio <=0) {
        $tips.innerHTML='box is hidden'
      }
    });
  }

  const options={
    // A list of thresholds, sorted in increasing numeric order, where each threshold is a ratio of intersection area to bounding box area of an observed target. Notifications for a target are generated when any of the thresholds are crossed for that target. If no value was passed to the constructor, 0 is used.
    // threshold: 1,
  }
  const observer=new IntersectionObserver(callback, options)
  observer.observe(document.querySelector('.box'))
</script>
2.深拷貝一個對象

我們經(jīng)常使用 lodash 來深拷貝一個對象。

const obj={
  a: {
    b: {
      name: 'fatfish'
    }
  }
}

const obj2=lodash.cloneDeep(obj)

obj2.a.b.name='medium'
console.log(obj.a.b.name) // fatfish
console.log(obj2.a.b.name) // medium

但這非常麻煩，因為我們必須下載整個庫才能使用 cloneDeep。

幸運的是，在大多數(shù)情況下，我們可以使用這兩種更簡單的方式來深拷貝一個對象。

深度克隆1

const deepClone1=(obj)=> {
  return JSON.parse(JSON.stringify(obj))
}

const obj={
  a: {
    b: {
      name: 'fatfish'
    }
  }
}
const obj2=deepClone1(obj)
obj2.a.b.name='medium'
console.log(obj.a.b.name) // fatfish
console.log(obj2.a.b.name) // medium

是的，我相信你已經(jīng)看到了，deepClone1 有一些缺陷，它不能復(fù)制函數(shù)、正則表達(dá)式、未定義等值。

const deepClone1=(obj)=> {
  return JSON.parse(JSON.stringify(obj))
}

const obj={
  a: {
    b: {
      name: 'fatfish'
    }
  },
  reg: /fatfish/gi,
  name: undefined,
  showName: (name)=> console.log(name)
}
const obj2=deepClone1(obj)
console.log(obj2)
/*
{
    "a": {
        "b": {
            "name": "fatfish"
        }
    },
    "reg": {}
}
*/

深度克隆2

另一種方法是使用 structuredClone。

這非常方便，我們甚至可以不做任何處理就可以深拷貝一個對象。

它甚至可以復(fù)制正則表達(dá)式和未定義的。

const obj={
  a: {
    b: {
      name: 'fatfish'
    }
  },
  reg: /fatfish/gi,
  name: undefined,
}

const obj2=structuredClone(obj)
obj2.a.b.name='medium'
console.log(obj.a.b.name) // fatfish
console.log(obj2.a.b.name) // medium
console.log(obj2)
/*
{
    "a": {
        "b": {
            "name": "medium"
        }
    },
    "reg": /fatfish/gi,
    "name": undefined
}
*/

但是真的沒有缺點嗎？ 它在某些情況下也無法正常工作。

• 它不能復(fù)制功能
• 它不復(fù)制dom元素
• ETC。

3.獲取瀏覽器名稱

在前端監(jiān)控系統(tǒng)中，需要獲取用戶出錯的瀏覽器。

這是獲取主要瀏覽器名稱的通用函數(shù)。

const getBrowserName=()=> {
  const userAgent=window.navigator.userAgent
  const browsers={
    chrome: /chrome/i,
    safari: /safari/i,
    firefox: /firefox/i,
    ie: /internet explorer/i,
    edge: /edge/i,
    opera: /opera|opr/i,
    yandex: /yandex/i,
    uc: /ucbrowser/i,
    samsung: /samsungbrowser/i,
    maxthon: /maxthon/i,
    phantomjs: /phantomjs/i,
    crios: /crios/i,
    firefoxios: /fxios/i,
    edgios: /edgios/i,
    safariios: /safari/i,
    android: /android/i,
    ios: /(iphone|ipad|ipod)/i,
    unknown: /unknown/i
  }

  for (const key in browsers) {
    if (browsers[key].test(userAgent)) {
      return key
    }
  }
  return 'unknown'
}
// Execute the above code in chrome browser
console.log(getBrowserName()) // chrome
// Execute the above code in safari browser
console.log(getBrowserName()) // safari

4.獲取隨機(jī)顏色

我怎樣才能得到一個隨機(jī)的有效顏色？

大家可以點擊codepen鏈接體驗實際效果。

const randomColor=()=> {
  // Generate three random numbers as the three components of an RGB color value
  const r=Math.floor(Math.random() * 256);
  const g=Math.floor(Math.random() * 256);
  const b=Math.floor(Math.random() * 256);
  // Convert RGB color values to hexadecimal format
  const hexR=r.toString(16).padStart(2, '0');
  const hexG=g.toString(16).padStart(2, '0');
  const hexB=b.toString(16).padStart(2, '0');
  // Concatenated into a complete color value string
  const hexColor=`#${hexR}${hexG}${hexB}`;
  return hexColor;
}

演示地址：https://code.juejin.cn/pen/7259289776530915385

5.復(fù)制內(nèi)容到剪貼板

為了給我們的網(wǎng)站用戶提供更好的交互體驗，我們經(jīng)常需要提供將內(nèi)容復(fù)制到剪貼板的功能。

難以置信的是，我們竟然只需要6行代碼就可以實現(xiàn)這個功能。

const copyToClipboard=(content)=> {
  const textarea=document.createElement("textarea")
  textarea.value=content
  document.body.appendChild(textarea)
  textarea.select()
  document.execCommand("Copy")
  textarea.remove()
}

copyToClipboard('i love medium') // i love medium

演示地址：https://code.juejin.cn/pen/7259288042232840248

6.從搜索中獲取查詢字符串

使用 URLSearchParams 解析搜索數(shù)據(jù)變得非常容易。

const getSearchParam=(name)=> {
  const searchParams=new URLSearchParams(window.location.search)
  return searchParams.get(name)
}

// https://medium.com?name=fatfish&age=1000
console.log(getSearchParam('name')) // fatfish
console.log(getSearchParam('age')) // 1000

const getSearchParams=()=> {
  const searchParams=new URLSearchParams(window.location.search)
  const params={};
  for (const [ key, value ] of searchParams) {
    params[key]=value
  }

  return params
}
// https://medium.com?name=fatfish&age=1000
getSearchParams() // { name: 'fatfish', age: 1000 }

7.將元素滾動到頁面頂部

我們可以使用 scrollIntoView 方法將元素滾動到頁面頂部。甚至它可以提供非常流暢的用戶體驗。

const scrollToTop=(ele)=> {
  ele.scrollIntoView({ behavior: "smooth", block: "start" })
}

document.querySelector('button').addEventListener('click', function () {
  scrollToTop(this)
}, false)

8.將元素滾動到頁面底部

將元素滾動到頂部是如此簡單。

那我們要如何將元素滾動到頁面底部？我想你已經(jīng)猜到了，設(shè)置block結(jié)束即可。

const scrollToTop=(ele)=> {
  ele.scrollIntoView({ behavior: "smooth", block: "end" })
}

document.querySelector('button').addEventListener('click', function () {
  scrollToTop(this)
}, false)

演示地址：https://code.juejin.cn/pen/7259278531174072379