javascript - 有没有更简单的方法来加载随机图像？

Question

我认为我没有正确解释这一点，但我最终回答了我自己的问题，基本上我正在寻找删除头代码，因为它使文档看起来很难看，并且每次滚动时都非常乏味，我把将头部 javascript 代码放入其文件中，并从索引头部部分中删除代码，它似乎工作得很好。

感谢大家的帮助!

/关闭/已回答

任何人都可以指出一种更简单的方法来在我的index.html 页面上加载随机图像吗？

这是我当前使用的方法

在头部:

// It currently goes to css/images/images/410.png, I have just put six here so it isn't long and annoying

<script type="text/javascript">
var imageURLs = [
   "css/images/avatars/1.png"
 , "css/images/avatars/2.jpg"
 , "css/images/avatars/3.png"
 , "css/images/avatars/4.png"
 , "css/images/avatars/5.png"
 , "css/images/avatars/6.png"
 ];
 function getImageTag() {
 var img = '<img src=\"';
 var randomIndex = Math.floor(Math.random() * imageURLs.length);
 img += imageURLs[randomIndex];
 img += '\" alt=\"Oh no, the image is broken!\"/>';
 return img;
 }
 </script>

在正文部分:

    <!-- RANDOM IMAGE 1 -->
    <script type="text/javascript">
    document.write(getImageTag());
    </script>
    <!-- RANDOM IMAGE 2 -->
    <script type="text/javascript">
    document.write(getImageTag());
    </script>

我目前总共有 410 张图像，因此您可以想象它在头部代码中是多么烦人

Answer 1

如果您的图像都是这样命名的，那么这应该有效:

<script type="text/javascript">
var imagesCount = 410;
 function getImageTag() {
 var img = '<img src=\"css/images/avatars/';
 var randomIndex = 1+Math.floor(Math.random() * imagesCount );
 img += randomIndex;
 img += '.png\" alt=\"Oh no, the image is broken!\"/>';
 return img;
 }
 </script>