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

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>

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

Randomize Image and Color Pair on Webpage

javascript

jquery

image

random

colors