如果我想随机化颜色，但在随机化发生时使用 onload 方法制作了一组颜色，该怎么办？

Question

嗨，每次调用或打开页面时，我都想制作不同的颜色，并使用我在 table 制作的一对组合，使用不同的个性化行颜色。我如何让它成为现实？？？这行 CSS 代码我试图实现以实现一些目标：

我确实尝试使用 Math 方法来随机获得一些颜色，但我坚持了下来。因为它不会个性化情侣套色。在下面查看我用 javascript 制作的代码：

-------------------------------------------- -------------- GS ---------------------------------- ----------------------------


function randomColor(customColorsArray, takenColorsArray) {
 var text = "",
     colors = ["orange", "yellow", "red", "maroon"];

   if (customColorsArray && takenColorsArray) {
      var text = "["+colors+"]";
   }
     else if (!customColorsArray && !takenColorsArray) {
      text += colors[Math.floor(Math.random() * colors.length)];
   }
     else {
      text += customColorsArray[Math.floor(Math.random() * customColorsArray.length)];
  };

   return text;
}


function personalRandomColor(e, customColor1, customColor2, customColor3, customColor4) {
 var text = "";

   if (!customColor1) {
      if (e == "orange") {text += "white";}
      else if (e == "red") {text += "blue";}
      else if (e == "yellow") {text += "magenta";}
      else if (e == "maroon") {text += "almond";};

   } else {
       if (e == "orange") {text += customColor1;}
       else if (e == "yellow") {text += customColor2;}
       else if (e == "red") {text += customColor3;}
       else if (e == "maroon") {text += customColor4;};
   };

  return text;
}


function showTable() {
  var s = SpreadsheetApp,
      ss = s.getActiveSpreadsheet(),
      sss = ss.getSheets(),
      Html = HtmlService.createHtmlOutput(result)
            .setSandboxMode(HtmlService.SandboxMode.IFRAME)
            .setWidth(545)
            .setHeight(500),
      customColorsArrays = randomColor('passingClass', 'takenColor'),
      randomFirstColor = 'yellow',
      skipFirstColor = customColorsArrays.replace('yellow,', ''),
      randomSecondColor = randomColor(toString(skipFirstColors)),
      result = "<head>
                   <style type='text/css'>
                      .gridview {
                        display: inline-block;
                        border-collapse: collapse;
                        margin: 0px 4px 4px 0;
                        box-shadow: 3px 3px 4px #bbb;
                      }

                      .gridview, .gridview td {
                        margin: 0;
                        border:  1px solid #cccccc;
                      }

                      .gridview tr:nth-child(even) {
                        background-color: "+randomFirstColor+";
                      }

                      .gridview tr:nth-child(odd) {
                        background-color: "+randomSecondColor+";
                      }

                      .gridview td {
                        font-weight: normal;
                        text-align: left;
                        vertical-align: middle;
                      }

                      .gridview td {
                        padding: 4px 10px 5px 9px;
                      }
                   </style>
               </head>
            <table border=1 class='gridview'>";

                for (var i = 0; i < sss.length; i++) {
                   result += "<tr>";
                    result += "<td>" + sss[i].getName() + "</td>";
                   result += "</tr>";
                }
                result += "</table>";

        ss.toast(customColorsArrays+" & "+skipFirstColors+" & "+randomSecondColor, "Output Test", 50);
        ss.show(Html.setTitle("Show the Table at PopUp"));}
}

我想要的是，如果 table 已重新加载，每次打开页面时总是显示不同颜色的行，并且必须使用我设置的个性化设置进行设置。请查看 personalRandomColor() 函数在这种情况下，我希望 Orange 仅用于 nth-child(odd) 和nth-child（偶数） 在 第一次随机打开 和 [=20= nth-child(奇数)为红色，nth-child(偶数)为蓝色，第二个为 Random Open 如此等等……等等……一次又一次，总是一次又一次，但条件是跳过第一种颜色!!!

Answer 1

试试这个：

var colors = ["#ccff99", "#e6ffb3", "#dfff80", "#ffffcc", "#ffff99", "#ffe6ff", "#ffcccc", "#ffcc99", "#ffe6b3", "#fff0b3"];
$(document).ready({
    var randomFirstColor = rando(colors);//grab a random color
    colors.splice(randomFirstColor.index, 1);//remove color from array so we don't risk picking it again. you can remove this line if you don't care whether the second color is the same as the first
    $(".gridview tr:nth-child(odd)").css({backgroundColor: randomFirstColor.value});//style odd rows
    $(".gridview tr:nth-child(even)").css({backgroundColor: rando(colors).value});//style even rows
});

您只需将以下内容粘贴到 html 文档的 head 标签中即可导入 Randojs and jQuery：

<script src="https://randojs.com/1.0.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

或者，要排除 jQuery，请尝试：

var colors = ["#ccff99", "#e6ffb3", "#dfff80", "#ffffcc", "#ffff99", "#ffe6ff", "#ffcccc", "#ffcc99", "#ffe6b3", "#fff0b3"];
$(window).on("load", function(){
    var randomFirstColor = rando(colors);//grab a random color
    colors.splice(randomFirstColor.index, 1);//remove color from array so we don't risk picking it again. you can remove this line if you don't care whether the second color is the same as the first
    var randomSecondColor = rando(colors);//grab another random color

    var gridviews = document.getElementsByClassName("gridview");
    for(var i = 0; i < gridviews.length; i++){//for each gridview...
        var rows = gridviews[i].getElementsByTagName("tr");
        for(var j = 0; j < rows.length; j++){//for each row in the gridview...
            if(j % 2 == 0){
                //style even
                rows[j].style.backgroundColor = randomFirstColor.value;
            }
            else{
                //style odd
                rows[j].style.backgroundColor = randomSecondColor.value;
            }
        }
    }
});

您只需将以下内容粘贴到 html 文档的 head 标签中即可导入 Randojs：

<script src="https://randojs.com/1.0.0.js"></script>

现在您已经更新了 post，我发现您的代码存在问题。您将一个字符串分配给 "result" 变量，但您将该字符串分成多行，如下所示：

var result = "example
of
bad
formatting";

您应该在每一行开始和结束引用，并在它们之间添加一个加号以将它们连接在一起，如下所示：

var result = "example" + 
"of" + 
"good" + 
"formatting";

一旦你解决了这个问题，请确保将你制作的 html 字符串放入页面上的一个元素中，然后调用我给你的随机行颜色代码。

如果我想随机化颜色，但在随机化发生时使用 onload 方法制作了一组颜色，该怎么办？

How do if I want to make a randomize colors but with a couple set I've made with onload methode while randomizing of an occcur?

css

random

styles

stylesheet

google-apps-script