javascript - JavaScript随机背景图片更改加载

我在页面上有6个ahref框，每个框都有不同大小的背景图像，我想做的就是onload获取3个随机框的bg图像文件扩展名，并将其交换为gif。因此，每次页面刷新3张图像都是不同的。林不完全确定如何执行此操作，因为我希望位置是随机的，但是可以通过更改url而不是完全随机的图像来进行控制。

最佳答案

要从列表中随机获取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.