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

Question

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

我使用 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

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

例子：

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 ""; }

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