首先是效果圖

• 可以自適應螢幕大小

• 可以每次重新整理改變熱詞底色

在電腦顯示如下

下面是實現過程

• 資料準備：原始資料為["透視小醫神","白鹿原","我的絕色美女房客","首席總裁：契約寵妻","仕途天驕","擇天記","爆寵狂妻：神醫五小姐","溺寵成妃","很純很曖昧","我的名模總裁","極道軍醫","鬥破蒼穹"]

• 佈局：

其中hotWords是上面的資料。以上程式碼是根據原始資料的個數自動生成hotWords.length個span元素

• 樣式：

用到的是flex-wrap的特性：在一行排版拍不下的時候，可以根據螢幕大小自適應換行。

• 背景色每次重新整理動態變化

實現這個功能只需要每次重新整理的時候，返回的style的background-color的rgba的值每次動態變化就可以。

關鍵程式碼：

bcColor.push(`background-color: rgba(` + Math.ceil(Math.random() * 255) + `, ` + Math.ceil(Math.random() * 255) + `, ` + Math.ceil(Math.random() * 255) + `, ` + Math.random() + `)`)

每次重新整理的時候rgb的每個值都是隨機的255以下，a是1以下的數

以上就是此元件實現的基本思路。交流學習qq475804848

​