在个人博客网站中,一般都会看到有标签分类。然而标签如果太多,而且颜色样式都一致的话,看起来就不爽心悦目。恰好在给公司网站添加标签新功能的时候,需要将标签分类,而且使用了不同颜色区分。由于使用的是
layui2.0
中的背景色,因为颜色比较少,有客户反应说颜色重了,于是在这里扩展下。颜色使用的是360浏览器中颜色选择器默认给定的颜色(共有十九种),获得随机颜色的方法是使用js的Math.floor()
和Math.random()
的函数,获取颜色列表的索引值。
- 代码
function randColor(){
var colorArr = [
'#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5', '#2196f3', '#03a9f4', '#00bcd4',
'#009688', '#4caf50', '#8bc34a', '#cddc39', '#ffeb3b', '#ffc107', '#ff9800', '#ff5722',
'#795548', '#9e9e9e', '#607d8b'
];
var len = colorArr.length;
var index = Math.floor(Math.random()*len);
return colorArr[index];
}
- 效果图