Question

我正在尝试使用JavaScript生成5种随机十六进制颜色。我也得到了输出结果。我可以在<a></a>元素中打印随机十六进制颜色。但是，我不知道如何将相同的十六进制颜色值打印为背景颜色。

到目前为止，我已经尝试过了

function returnMe() {
	var s = "";
  for(var i = 0; i < 5; i++) {
    s += '<a class="a" href=""><span class="b">#' + (function co(lor){   return (lor +=
  [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)])
  && (lor.length == 6) ?  lor : co(lor); })('') + "</span><span class='c' style='background:'></span></a>";
  }
  document.getElementById("clr").innerHTML = s;
}
returnMe();

.a {
	  display: inline-block;
    background: #fff;
    border: 1px solid #e2e2e2;
    width: 180px;
    height: 180px;
    margin: 10px;
    text-align: center
}
.b {
	  background: #f9f9f9;
    display: inline-block;
    width: 100%;
    padding: 10px 0
}
.c {
	  display: inline-block;
    width: 100%;
    height: 141px
}

<div id="clr">
</div>

Answer 1

我认为使用template literals使处理'和"更容易。但是您只需要在第二个跨度的背景属性中添加随机颜色即可。但是您必须创建一个变量才能两次使用随机颜色。

function returnMe() {
  function getChar(){
    return [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'][Math.floor(Math.random() * 16)];
  };

  function getColor() {
    let s = '';
    while(s.length < 6) {
      s += getChar();
    }
    return `#${s}`;
  }
	var s = "";
  for(var i = 0; i < 5; i++) {
    const color = getColor()
    s += `<a class="a" href=""><span class="b">${color}</span><span class="c" style="background: ${color}"></span></a>`;
  }
  document.getElementById("clr").innerHTML = s;
}
returnMe();

.a {
	  display: inline-block;
    background: #fff;
    border: 1px solid #e2e2e2;
    width: 180px;
    height: 180px;
    margin: 10px;
    text-align: center
}
.b {
	  background: #f9f9f9;
    display: inline-block;
    width: 100%;
    padding: 10px 0
}
.c {
	  display: inline-block;
    width: 100%;
    height: 141px
}

<div id="clr">
</div>

Answer 2

如果您需要在两个地方都访问函数的结果，则不能使用IFFE，因为会立即返回结果，请提取函数，调用它，将结果分配给变量并使用您需要的变量。

function returnMe() {
    var s = "";
    function co(lor) {
            return (lor +=
                [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'a', 'b', 'c', 'd', 'e', 'f'][Math.floor(Math.random() * 16)])
                && (lor.length == 6) ? lor : co(lor);
        }

    for (var i = 0; i < 5; i++) {
        var color = co('')
        // you could use template literals here as well
        s += '<a class="a" href=""><span class="b">#' + color + "</span><span class='c' style='background-color:#" + color + "'></span></a>";
    }
    document.getElementById("clr").innerHTML = s;
}
returnMe();

.a {
	  display: inline-block;
    background: #fff;
    border: 1px solid #e2e2e2;
    width: 180px;
    height: 180px;
    margin: 10px;
    text-align: center
}
.b {
	  background: #f9f9f9;
    display: inline-block;
    width: 100%;
    padding: 10px 0
}
.c {
	  display: inline-block;
    width: 100%;
    height: 141px
}

<div id="clr">
</div>

Answer 3

您可以对其进行清理，并使用相同的颜色作为背景色。

function returnMe() {
  
  var content = "";
  
  for (var i = 0; i < 5; i++) {

    var color = '#' + (function co(lor){   return (lor +=
  [0,1,2,3,4,5,6,7,8,9,'a','b','c','d','e','f'][Math.floor(Math.random()*16)])
  && (lor.length == 6) ?  lor : co(lor); })('');
    
    content += "<a class='a' href=''>";
    content += "<span class='b'>";
    content += color + "</span>";
    content += "<span class='c' style='background: "+ color +"'></span>";
    content += "</a>";
  
  }
  
  document.getElementById("clr").innerHTML = content;
}

returnMe();

.a {
  display: inline-block;
  background: #fff;
  border: 1px solid #e2e2e2;
  width: 180px;
  height: 180px;
  margin: 10px;
  text-align: center
}

.b {
  background: #f9f9f9;
  display: inline-block;
  width: 100%;
  padding: 10px 0
}

.c {
  display: inline-block;
  width: 100%;
  height: 141px
}

<div id="clr"></div>

Answer 4

为此，您只需简单地选择父div，然后通过for循环将带有背景标签设置为随机十六进制颜色的标签附加。

假设您的HTML是：

<div id="test">
</div>

您可以这样写：

$( document ).ready(function() {
  var colors = generateRandomHexColors(5);
  console.log(colors);
  populateToDOM(colors, "#test");
});

/** 
 * @param int
 * @return array
 */
function generateRandomHexColors(count) {
  var hex_color;
  var colors = []; 
  for (var i = 0; i < count; i++) {
    // from https://stackoverflow.com/a/5092846/4698963
    hex_color = '#'+(Math.random()*0xFFFFFF<<0).toString(16);
    colors.push(hex_color);
  }
  return colors;
}

/** 
 * @param array 
  * @param string
 */
function populateToDOM(colors, e) {
  console.log($(e));
  colors.forEach(function (color) {
    var to_be_added = "<a style='background-color: " +  color + "; height: 300px; width: 300px';> </a>";
    $(e).append(to_be_added);
  });
}

您需要更改a标签的CSS以内联显示，以使a标签具有宽度和高度：

a {
  display: inline-block;
}

Live Demo

for循环打印与背景色相同的十六进制颜色

4 个答案: