如果我想使颜色随机化,但又将我随机化的话,用onload methode制作了一对颜色,怎么办?

问题描述 投票:-1回答:1

嘿,我想每次调用或打开页面时都使用不同的颜色,并使用我在桌子上制作的几对设置不同的行颜色进行个性化设置。我该如何实现???我尝试达到的这行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"));}
}

我想要的是,如果重新加载了表格,每次打开页面时总是显示不同颜色的行,并且必须使用我设置的个性化设置。请看一下[[personalRandomColor()函数,在这种情况下,我想在该处使用仅用于nth-child(奇数)的橙色用于nth-child(偶数)的白色] 第一次随机开放]和第二个随机开放的红色] [和第二个随机开放的蓝色]等等……等等……一次又一次,总是一次又一次,但条件是跳过第一个颜色!!!>嘿,我想每次调用或打开页面时都使用不同的颜色,并使用我在桌子上制作的几对设置不同的行颜色进行个性化设置。我该怎么做...

尝试一下:

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标签中来导入RandojsjQuery
<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>

OR,要排除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>

现在您已经更新了帖子,我们可以看到您的代码有问题。您正在为“结果”变量分配一个字符串,但是您正在跨多行中断该字符串,如下所示:

var result = "example of bad formatting";

您应该在每一行的引号的开头和结尾,并在它们之间添加一个加号以将它们连接在一起,如下所示:

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

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

css google-apps-script random styles stylesheet
1个回答
0
投票
<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>

OR,要排除jQuery,请尝试:
© www.soinside.com 2019 - 2024. All rights reserved.