首先是效果图
可以自适应屏幕大小
可以每次刷新改变热词底色
在电脑显示如下
下面是实现过程
数据准备：原始数据为
["透视小医神","白鹿原","我的绝色美女房客","首席总裁：契约宠妻","仕途天骄","择天记","爆宠狂妻：神医五小姐","溺宠成妃","很纯很暧昧","我的名模总裁","极道军医","斗破苍穹"]布局：
其中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。