如何在页面加载时使用一组 ID 为 body 标签生成随机 ID答案

【问题标题】：How to generate a random ID for body tag upon page load using a set array of IDs如何在页面加载时使用一组 ID 为 body 标签生成随机 ID
【发布时间】：2012-01-30 04:19:27
【问题描述】：

这是我的问题：

我现在有一个非常简单的 html 网站预告片，带有大背景图片 (www.iambold.org)。

背景图片设置在body标签上，背景颜色也是如此。我需要的是在页面加载时为 body 标签随机分配一个不同的 ID。

这样做的原因是每个单独的 ID 都会有不同的背景图像和与之关联的不同背景颜色。

最后一部分是我需要生成器仅在我在 css 文件中设置的 ID 之间进行选择。

这是身体背景的 CSS：

body {font-family:'Lato',verdana,arial,sans-serif; font-size:14px; line-height:22px; }
body#body_1 {background:#fff url(../images/bg_splash.jpg) center -15px repeat-x;}
body#body_2 {background:#353932 url(../images/bg_splash2.jpg) center -15px repeat-x;}

我熟悉 jquery，并且可以很好地 hack 代码来做我需要的事情，但我还不足以为这些类型的事情编写自己的代码。

【问题讨论】：

您的随机值是否有最小值或最大值？你看过 Mozilla 开发者网络上的Math.random() 吗？你自己试过什么？
最大数量将是我为它制作的背景数量。所以它会改变。我还没有尝试过任何东西。我一直在网上搜索，看看有没有人问过这个问题。

标签： jquery html random

【解决方案1】：

将可能的 ID 存储在列表（数组）中。
使用Math.random() 和Math.floor() 生成一个随机整数。
从列表中选择元素。
将id 属性设置为元素的值。

示例（这个简单的脚本不需要 jQuery）：

$(function(){ //<-- That's jQuery, because `document.body` does not exist
              // in the head of the document.
    var styleIds = ["body1", "body2"];
    document.body.id = styleIds[ Math.floor(Math.random()*styleIds.length) ];
});

Math.random() 方法返回一个满足0 <= x < 1 的随机数。 Math.floor 楼层号码。列表大小为 2 时，可能的数字是：0 和 1，这是我们想要的，因为数组的索引是从零开始的。

【讨论】：

@jkilp 您可以通过单击绿色对勾（左侧）mark the answer as correct。如果答案非常棒，您还可以投票给答案。

【解决方案2】：

var ids = ['body_1', 'body_2', 'body_3'];
$(function () {
    $('body').attr('id', ids[Math.floor(Math.random()*ids.length)])
});

Demo

如果你保持 css 声明不变，只需将其放在页面底部

    <script> document.body.id = "body_" + Math.floor(Math.random()*[NUMBER_OF_DECLARATIONS]); </script>
</body>

【讨论】：

请不要为这个 D: 使用 jQuery：

【解决方案3】：

我会在 CSS 中使用简单的类而不是 ID 选择器。所以在 CSS 中定义几个类，然后使用下面的 sn-p 来分配一个随机类。

var classes = [ "classBg1", "classBg2", "classBg3" ];

$.ready( function() {
    var nextClass = classes[ Math.round( classes.length * Math.random() ) ];
    $('body').addClass( nextClass );
});

【讨论】：

请不要对这个 D: 使用 jQuery：
用户说他们正在使用并熟悉jQuery。为此使用 jQuery 取决于他们。不是我。

【解决方案4】：

您需要创建一个具有有效 ID 的数组，然后从中获取一个随机元素。

【讨论】：

【解决方案5】：

您可以使用Math.random() 生成随机编号。介于 0 和 1 之间。然后您可以Math.floor() 取最近的编号。然后将其分配给您的身体标签，并让他们根据Math.random() 函数生成的内容选择一个

【讨论】：

【解决方案6】：

您可能应该使用一个类，并且应该使用简单的 DOM 调用而不是 jQuery。话虽这么说：

var classList = ["v1","v2","v3","v4"];
document.body.className = classList[Math.round(Math.random()*4)];

【讨论】：

【解决方案7】：

首先，确定可以使用的最高标签，假设基数为#body_1

var iMax = $("style:contains('#body_')").length;

然后，给body标签随机设置一个：

$('body').attr('id','body_' + (Math.floor(iMax)+1));

应该可以的。

【讨论】：