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