Question

我正在制作一个包含单个圆圈和一个按钮的页面。按下按钮后，我希望圆圈变为随机颜色。

为什么我的代码无法正常运行？

cos

$("#button").click(function() {

  $("#thing").css("background-color", function() {

    var color = "#";

    var hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

    while (var i = 0; i < 6; i++) {

      color += hex[Math.floor(Math.random() * 16)];

    }

    alert(color);

    return color;

  });

});

Answer 1

你需要在这里使用for循环。不是一个循环。

for( var i = 0; i < 6; i++) {
     color += hex[Math.floor(Math.random() * 16)];
}

Answer 2

你甚至没有制作一个圆圈，你为while循环引入了一种新语法恭喜

¯_（ツ）_ /¯

您可以使用以下代码来查看您在那里做错了什么，并且您没有从设置color而不是从那里返回的点击事件返回任何内容

$("#button").click(function() {

  $("#thing").css("background-color", function() {

    var color = "#";

    var hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];
    var i = 0;
    while (i < 6) {

      color += hex[Math.floor(Math.random() * 16)];
      i++
    }
    $(this).css('background-color', color);
    //return color;

  });

});

#thing {
  color: #000;
  width: 100px;
  height: 100px;
  border: 1px solid red;
  border-radius: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="thing">
</div>

<button id="button">Click to change colour</button>

Answer 3

您的代码存在一些错误。希望这有帮助

$("#button").click(function() {
  $("#thing").css("background-color", function() {
    var color = "#";
    var hex = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "A", "B", "C", "D", "E", "F"];

    for (i = 0; i < 6; i++) {
      color += hex[Math.floor(Math.random() * 16)];
    }

    alert(color);
    return color;
  })
})

#thing {
  width: 20px;
  height: 20px;
  background: #ededed;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thing"></div>

<button id="button">Click to change colour</button>

Answer 4

while无法按预期工作。您拥有的语法将用作for，但不能用作while。

for (let i = 0; i < 6; i++) {
  color += hex[Math.floor(Math.random() * 16)];
}

如果您想使用while，可以执行以下操作：

let i = 0; 
while(i < 6) {
  color += hex[Math.floor(Math.random() * 16)];
  i++;
}

但是，不需要循环来创建0到0x1000000之间的数字。

/** Creates a color between 
 * #000000 and #ffffff inclusive
 */     
function createRandomColor() {
  const strHex = 
    Math.floor(Math.random() * 0x1000000)
    .toString(16)
    .padStart(6, '0');
  return `#${strHex}`;
}

const $thing = $('#thing');
$('#button').click(() => {
  $thing.css('background-color', createRandomColor());
});

#thing {
  width: 20px;
  height: 20px;
  background: #ededed;
  border-radius: 50%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="thing"></div>

<button id="button">Click to change colour</button>

我经常写ES6，但String.prototype.padStart是ES2017。如果您按照文档进行操作，则可以获取polyfill。

为什么我的功能没有运行？

4 个答案: