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));

Here's a Fiddle to show it in action.

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()

来获取图像

Javascript随机背景图像更改onload

2 个答案: