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

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

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

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

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

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

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

深度克隆1

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

深度克隆2

另一種方法是使用 structuredClone。

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

它甚至可以復制正則表達式和未定義的。

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

• 它不能復制功能

• 它不復制dom元素

• ETC。

3.獲取瀏覽器名稱

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

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

4.獲取隨機顏色

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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