html - 选择随机背景 - HTML/CSS

Question

我想在我的网站上实现“随机背景”，这样每次有人刷新页面时，他们都会看到一个新背景。不幸的是，我不能使用 PHP，为此我找到了这个:http://css-tricks.com/snippets/php/randomize-background-image/虽然这对学习很有用，但我实际上无法使用它。

我当前的代码:

.mainview {
    background-image: url(images/bg-1.png);
    height: 600px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom center;
    background-attachment: fixed;
    position: relative;
    top: 12px
}

我不想将 URL 设置为一张图片，而是希望它从我拥有的三个图片 (bg-1、bg-2、bg-3) 的列表中随机选择一张图片。我该怎么做？

Answer 1

创建一个图像数组，使用 Math.random() 获取随机索引并使用该索引获取随机图像。

<script type="text/javascript">

  var images = ['image-1.jpg', 'image-2.jpg', 'image-3.jpg', 'image-4.jpg'];
  document.getElementsByClassName('mainview')[0].style.backgroundImage = 'url(' + images[Math.floor(Math.random() * images.length)] + ')';

</script>