该代码应用到博客主题,展示地址:https://xzzz2020.gitee.io/tags/,如果有更好的优化思路,可以跟博主探讨探讨。
生成随机颜色代码比较多,但是想要美化这个随机算法有点难。
博主对此进行了一些相关测试,该测试结果因个人的审美会有较大的差距。
基本优化思路是:
- 如果固定一个颜色,再优化会更加简单,主要固定了一个是红色一个是蓝色(以绿为底,觉得很丑)
- 剩下两个颜色不能过深或者过浅,所以进行了限定
- 最后就是以红为底和以蓝为底的比例,就采用了经典黄金分割比
<script>
function getColor1() {//固定红色值
var re = "#";
var col = color();
re += col + "FF";
return re
}
function getColor2() {//固定蓝色值
var re = "#FF";
var col = color();
re += col;
return re
}
function color(){
var re = "";
for (var xunhuan = 0; xunhuan < 2; xunhuan++) {
var temp = Math.floor(256 * Math.random()) ;
if(temp<130 && xunhuan==0){
temp = 130;
}
if(temp>200 && xunhuan==1){
temp =200;
}
temp = temp.toString(16);//将数值转换成16进制
if (temp.length !== 2) {
temp = "0" + temp
}
re += temp//对颜色进行拼接
}
return re;
}
var global_tags_random = 5//这个是博主标签的按钮数目,这样让每个标签都有不同的颜色
for (xunhuan = 0; xunhuan <= global_tags_random; xunhuan++) {
var temp = document.getElementById("tag-" + xunhuan.toString());
var random = Math.random();
if(random <0.618){//分配红色和蓝色出现的比例
temp.style.backgroundColor = getColor1()
}else{
temp.style.backgroundColor = getColor2()
}
}
</script>