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

标签随机颜色和随机字体排列_第1张图片

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

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

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

 

最后的效果是


                  

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

 

你可能感兴趣的:(vue,前端小知识)