Question

我已经构建了一个UI，用户可以在其中指定建筑物中的楼层数，之后每个菜单项代表一个楼层。这个系统有效，但现在我希望每个菜单项都有不同的背景颜色和边框颜色。

我使用Math.random来生成颜色（有效）但是现在每次重新加载页面，或者转到另一个页面，所有颜色都会改变，而我只需要一次随机颜色，每次都需要相同颜色的第一代颜色

所以我想要一个Javascript（或Jquery）系统，它根据楼层的数量生成一次颜色，然后一直使用这些颜色。

while(countEtages>=1) {
    var color ='#'+Math.random().toString(16).substr(2,6);
    menu_container.innerHTML += "<li style=\"width: " + width + ";background-color:" + color + ";\" class=\"menu-item "+((etage == etageNummer) ? 'active' : '')+"\" id=\"etage-" + etageNummer + "\"><a href=\"/etage.html?etage=" + etageNummer + "\">Etage " + etageNummer +"</a></li>";
    etageNummer++;
    countEtages--;
}

这是现在的代码（包括随机颜色）

我希望有人能够理解我想要的东西并帮助我。

Answer 1

您可以选择一些您喜欢的颜色并将它们放在一个长于最大楼层数的数组中，然后以floor-count作为索引访问该数组。

示例：

var colors = ["#000000","#0000CC","#000033","#000066","#000099","#0000FF","#00CC00",
              "#00CCCC","#00CC33","#00CC66","#00CC99","#00CCFF","#003300","#0033CC",
              "#003333","#003366","#003399","#0033FF","#006600","#0066CC","#006633",
              "#006666","#006699","#0066FF","#009900","#0099CC","#009933","#009966",
              "#009999","#0099FF","#00FF00","#00FFCC","#00FF33","#00FF66","#00FF99",
              "#00FFFF","#CC0000","#CC00CC","#CC0033","#CC0066","#CC0099","#CC00FF",
              "#CCCC00","#CCCCCC","#CCCC33","#CCCC66","#CCCC99","#CCCCFF","#CC3300",
              "#CC33CC","#CC3333","#CC3366","#CC3399","#CC33FF","#CC6600","#CC66CC",
              "#CC6633","#CC6666","#CC6699","#CC66FF","#CC9900","#CC99CC","#CC9933",
              "#CC9966","#CC9999","#CC99FF","#CCFF00","#CCFFCC","#CCFF33","#CCFF66",
              "#CCFF99","#CCFFFF","#330000","#3300CC","#330033","#330066","#330099",
              "#3300FF","#33CC00","#33CCCC","#33CC33","#33CC66","#33CC99","#33CCFF",
              "#333300","#3333CC","#333333","#333366","#333399","#3333FF","#336600",
              "#3366CC","#336633","#336666","#336699","#3366FF","#339900","#3399CC",
              "#339933","#339966","#339999","#3399FF","#33FF00","#33FFCC","#33FF33",
              "#33FF66","#33FF99","#33FFFF","#660000","#6600CC","#660033","#660066",
              "#660099","#6600FF","#66CC00","#66CCCC","#66CC33","#66CC66","#66CC99",
              "#66CCFF","#663300","#6633CC","#663333","#663366","#663399","#6633FF",
              "#666600","#6666CC","#666633","#666666","#666699","#6666FF","#669900",
              "#6699CC","#669933","#669966","#669999","#6699FF","#66FF00","#66FFCC",
              "#66FF33","#66FF66","#66FF99","#66FFFF","#990000","#9900CC","#990033",
              "#990066","#990099","#9900FF","#99CC00","#99CCCC","#99CC33","#99CC66",
              "#99CC99","#99CCFF","#993300","#9933CC","#993333","#993366","#993399",
              "#9933FF","#996600","#9966CC","#996633","#996666","#996699","#9966FF",
              "#999900","#9999CC","#999933","#999966","#999999","#9999FF","#99FF00",
              "#99FFCC","#99FF33","#99FF66","#99FF99","#99FFFF","#FF0000","#FF00CC",
              "#FF0033","#FF0066","#FF0099","#FF00FF","#FFCC00","#FFCCCC","#FFCC33",
              "#FFCC66","#FFCC99","#FFCCFF","#FF3300","#FF33CC","#FF3333","#FF3366",
              "#FF3399","#FF33FF","#FF6600","#FF66CC","#FF6633","#FF6666","#FF6699",
              "#FF66FF","#FF9900","#FF99CC","#FF9933","#FF9966","#FF9999","#FF99FF",
              "#FFFF00","#FFFFCC","#FFFF33","#FFFF66","#FFFF99","#FFFFFF"]

while(countEtages>=1) {
    var color = colors[countEtages % colors.length];
    menu_container.innerHTML += "<li style=\"width: " + width + 
     ";background-color:" + color + ";\" class=\"menu-item "+
     ((etage == etageNummer) ? 'active' : '')+"\" id=\"etage-" + etageNummer + 
     "\"><a href=\"/etage.html?etage=" + etageNummer + "\">Etage " + etageNummer+ "</a></li>";
    etageNummer++;
    countEtages--;
}

Answer 2

尝试使用Cookie。这可以是一个例子：

while(countEtages>=1) {
    var cookiecolor=getCookie("color"); // Get cookie
    if (color!="") { //check if cookie exist (yes)
      $('.menu-item').css(background-color,color);
    }else{ // cookie doesnt exists
     var color ='#'+Math.random().toString(16).substr(2,6);
     menu_container.innerHTML += "<li style=\"width: " + width + ";background-color:" + color + ";\" class=\"menu-item "+((etage == etageNummer) ? 'active' : '')+"\" id=\"etage-" + etageNummer + "\"><a href=\"/etage.html?etage=" + etageNummer + "\">Etage " + etageNummer +"</a></li>";
     etageNummer++;
     countEtages--;
     document.cookie="color="+color;
    }
}
function getCookie(cname) {
 var name = cname + "="; var ca = document.cookie.split(';'); 
 for(var i=0; i<ca.length; i++) {
  var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1);
  if (c.indexOf(name) != -1) return c.substring(name.length,c.length); 
 }
 return ""; }

如果您是第一次进入网络，则会创建一个颜色变量。此var将存储在cookie中。如果此cookie存在，您的脚本将读取它并将更改您的菜单颜色。

可变数量的菜单项，具有所有不同的颜色

2 个答案: