如何为具有相同 class 名称的多个部门随机显示不同的背景图像

Question

我目前正在处理信用卡 UI。我一直在尝试随机更改多个部门的背景图像（class 名称相同）。我的意图是在重新加载页面时为每个部门随机显示不同的图像，但我最终为所有目标部门提供相同的图像（尽管是随机的）。

不胜感激。

当前代码如下（此处不写样式）

<html>
<body>
<div class="card-inner"></div>
<div class="card-inner"></div>
<div class="card-inner"></div>
<script>
window.onload = function () {
        var url = [];
        url[0] = 'card-bg1.jpg';
        url[1] = 'card-bg2.jpg';
        url[2] = 'card-bg3.jpg';
        var n = Math.floor(Math.random() * url.length);
        var elm = document.querySelectorAll('.card-inner');
        for (let i = 0; i < elm.length; i++) {
             elm[i].style.backgroundImage = 'url(../img/service/' + url[n] + ')';
         }    
    }
</script>
 
</body>
</html>

Answer 1

随便动

var n = Math.floor(Math.random() * url.length);

像这样在循环中

for (let i = 0; i < elm.length; i++) {
  var n = Math.floor(Math.random() * url.length);
  elm[i].style.backgroundImage = 'url(../img/service/' + url[n] + ')';
}

调用一次怎么会不同呢？

如果你希望它们是唯一的，你可以使用这样的代码，每次从 urls 数组中删除所选元素

function () {
  const urls = [] 
  const elm = document.querySelectorAll('.card-inner');
  for (let i = 0; i < elm.length; i++) {
    if (!urls.length) {
      urls.push('card-bg1.jpg', 'card-bg2.jpg', 'card-bg3.jpg');
    }
    const n = Math.floor(Math.random() * urls.length);
    const url = urls.splice(n, 1).pop()
    
    elm[i].style.backgroundImage = 'url(../img/service/' + url + ')';
  }    
}

PS 使用 var 和 let 看起来很奇怪。如果使用 let，则对不可更改的变量使用 const

如何为具有相同 class 名称的多个部门随机显示不同的背景图像

How to show different background-images randomly for multiple divisions of same class name

javascript

background-image