美化JS生成随机颜色

    技术2026-02-28  7

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