为了循环打印与背景颜色相同的六角颜色

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

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

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

您可以将其清洁一点并为背景颜色使用相同的颜色。

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 3

如果您需要在两个位置访问函数的结果变量并在需要的地方使用变量。

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

实时演示