随机化网页上的图像和颜色对

Question

我希望在刷新时随机化网页上的图像和颜色对。比如刷新时会显示“img A”和“#999;”，接下来可能会显示“img B”和“#fff;”；基本上，一张图片只与一种颜色配对，并且该颜色永远不会与不同的图片搭配。

棘手的部分是我需要在 css/div "a:hover{" 下随机化颜色，并在不同 id 下随机化图像（我将其命名为 #scanner，如果有帮助的话）

到目前为止，我有这个，但它不起作用。我对 javascript 不是很有经验，所以我完全陷入困境（即使我可能只是错过了一些非常简单的东西）。

<script>

 var colors = [["#CCCCCC",     "http://static.tumblr.com/ixbct68/1y1niuvxl/wwo.gif"], ["#7b9fb9",     "http://static.tumblr.com/ixbct68/2bzniuwcf/nottarget.gif"], ["#3df756",     "http://static.tumblr.com/ixbct68/eFxniuwqz/nonlethal.gif"]];

  var r = Math.floor(Math.random() * 4);
  document.getElementById("scanner").innerHTML = "<font   color=\"" +     pairs[r][0] + "\"<img src=\"" + pairs[r][1] +   "\">"

  text.css('color', colors[col][0]);
  </script>



<div id="scanner">
<script>
    document.getElementById("scanner").innerHTML = "<img src = \"" +     colors[col][1] + "\">"
  </script>
  </div>

Answer 1

您在数组中只有三个项目，但是您正在创建一个介于 0 和 3 之间的随机数（四个不同的值），因此有时它会尝试获取数组之外的项目。创建一个介于 0 和 2 之间的随机数，或者更好的是只使用数组的长度，以便它自动调整到您放入数组中的任何内容：

var r = Math.floor(Math.random() * colors.length);

之后，您尝试访问尚不存在的元素。由于该元素位于页面的下方，因此脚本运行时尚未解析它的代码。您应该将代码放在元素之后，或者页面的load 事件中。

该代码使用了一个名为 pairs 的数组，该数组不存在，并且它生成的 HTML 代码是错误的。有一个 font 元素（顺便说一句已弃用）没有右括号 (>) 也没有结束标签 (</font>)。你会使用这样的东西：

document.getElementById("scanner").innerHTML = '<span style="color:' + colors[r][0] + '"><img src="' + colors[r][1] + '"></span>';

然后有一些代码使用了不存在的变量text。

然后，您有了要更改的元素，以及该元素内的更多脚本。更改仍在解析的元素（即在结束标记之前）可能会产生一些意外或不可预测的行为，例如结束标记可能会生成另一个元素，或者作为某个其他元素的结束元素。

元素中的脚本重复了之前的一些脚本，但没有使用颜色。

让我们将代码按正确的顺序排列，并清除不需要的代码：

<div id="scanner"></div>

<script>

  var colors = [
    ["#CCCCCC", "http://static.tumblr.com/ixbct68/1y1niuvxl/wwo.gif"],
    ["#7b9fb9", "http://static.tumblr.com/ixbct68/2bzniuwcf/nottarget.gif"],
    ["#3df756", "http://static.tumblr.com/ixbct68/eFxniuwqz/nonlethal.gif"]
  ];

  var r = Math.floor(Math.random() * colors.length);
  document.getElementById("scanner").innerHTML = '<span style="color:' + colors[r][0] + '"><img src="' + colors[r][1] + '"></span>';

</script>