javascript - Javascript随机背景图像更改onload

Question

我在一个页面上有 6 个 ahref 框，它们都有不同大小的背景图像，我想做的是 onload 获取 3 个随机框 bg 图像文件扩展名，并将它们交换为 gif。所以每次页面刷新3张图片都是不同的。我不完全确定如何做到这一点，因为我希望位置是随机的，但是通过更改网址而不是更改完全随机的图像来进行控制。

Answer 1

要从列表中随机获取 3 个节点，您可以选择它们，将它们转换为数组，然后按 0 和 nodeList.length 之间的索引选择一个：

(function (document) {
    var boxes = document.getElementsByClassName('box'),
        background = '',
        index = 0;

    // Convert the nodeList to an Array
    boxes = Array.prototype.slice.call(boxes);

    // Returns a random integer between min and max
    // Using Math.round() will give you a non-uniform distribution!
    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

    for (var i=0; i<3; i++) {
        // Pick a random node
        index = getRandomInt(1, boxes.length) - 1;
        // Background
        background = document.defaultView.getComputedStyle(boxes[index])
            .backgroundImage
            .replace('.jpg', '.gif');
        boxes[index].style.cssText = "background-image:" + background;
        // Remove that node so we don't get it again
        boxes.splice(index, 1);
    }

}(document));

这是一个 Fiddle 来展示它的实际效果。

Answer 2

var randomNum = Math.floor(Math.random() * 6)

这将生成一个介于 0-5 之间的随机数。所以你可以继续选择相应的孩子

$( "ul li:nth-child(randomNum )" ).css('background-image', 'url(http://url you want.com)')

如果您想要随机图像，也可以尝试命名图像，以便您可以使用另一个随机变量通过将图像附加到url()