美化JS生成随机颜色

该代码应用到博客主题,展示地址: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>

你可能感兴趣的:(算法)