Javascript 如何从多个跨度中选择一个随机跨度

我有一组跨距，它们被设置为显示宽度和高度为60px的内联块，我希望javascript从所有跨距中随机选取一个跨距，并对其应用颜色。我真的不知道从哪里开始。任何帮助都将不胜感激

你说你不知道从哪里开始。好吧，经过一点思考，它变得显而易见：

1） 了解如何在JS中生成随机数（简单的谷歌搜索）

2） 了解如何使用点1从数组中挑选随机元素

3） 要意识到节点集，例如，作为

getElementsByTagName

或

querySelectorAll

的结果，是类似于数组的（但实际上不是数组），因此我们可以通过方括号语法从中挑选出一个特定的元素，就像使用数组一样。因此，我们可以将第2点应用于该节点集

因此：

首先

var elts = document.getElementsByTagName('span');

如果使用jQuery：

elts = $('span')

因此，现在

elts

包含文档中的所有

span

s

棘手的部分是在其中选择一个随机元素。我们必须使用

Math.floor（Math.random（）*elts.length）

来选择随机索引。这是一个很好的解释：

• Math.random（）

  从[0,1]返回一个随机数

• elts.length

  是数组的长度。我们将其乘以

  Math.random（）

  以获得从0到

  elts.length

  的随机数组索引

• Math.floor（）

  四舍五入，这样我们就不会出现越界异常

总而言之：

var myRandomSpan = elts[Math.floor(Math.random() * elts.length)]

---

你可以用

myRandomSpan

做你想做的事，我不知道这是否有效-我从各种搜索中提取了随机代码，但理论上你可以将所有跨度放入一个数组，计算长度，生成基于该长度的随机数，并通过索引访问它：

var numSpans $("#container span").size();
var optionTexts = [];

// populat our span array
$("#container span").each(function() { optionTexts.push($(this).text()) });

var random = NumMath.floor(Math.random() * optionText.length);

var randomSpan = optionText[random];

---

您可以为跨度指定一个整数id

<span id=1></span>
<span id=2></span>
...
<span id=100></span>

然后，使用随机整数，您可以如下选择跨度：

document.getElementById(randomID)

$("#" + randomID).css("background-color", {new_color})

如果您使用的是jQuery，则可以如下更改背景颜色：

document.getElementById(randomID)

$("#" + randomID).css("background-color", {new_color})

---

请张贴您与的问题，并附上（或类似），如果需要，演示该问题。有许多从数组中选择随机元素的示例。由于您可以将

getElementsByTagName

的结果视为数组，因此这些示例中的任何一个都应该适用于您。谢谢，这非常有效。您知道是否有方法可以通过id执行此操作吗？如果没有，也可以，谢谢.By ID？HTML指定每个元素的ID是唯一的，因此不能有2个

span

s（或任何2个元素）具有相同的ID。从1个span中随机选择一个span是没有意义的。