标签随机颜色和随机字体排列

希望这种的,颜色随机字体的字号随机,并且间隔的距离也是随机的。

首先写个获取随机颜色的函数

randomRgbaColor() { //随机生成RGB颜色
         var r = Math.floor(Math.random() * 256); //随机生成256以内r值
         var g = Math.floor(Math.random() * 256); //随机生成256以内g值
         var b = Math.floor(Math.random() * 256); //随机生成256以内b值
         return `rgb(${r},${g},${b})`; //返回rgba(r,g,b,a)格式颜色
},

字体希望是二位数的随机的。Math.floor(Math.random()*10)+10   

间隔的距离也是参照上面两位的随机数写Math.floor(Math.random()*10)+20

最后的效果是

<h5 >
                  <span v-for="(item,key1) in advwordbar"  :key='key1'

 :style="{'color':randomRgbaColor(),'font-size':Math.floor(Math.random()*10)+10+'px','padding-left':Math.floor(Math.random()*10)+20+'px'}">{{item}}</span>
 </h5>

猜你喜欢

转载自blog.csdn.net/qq_33769914/article/details/83379342