Question

我想要的很简单，每次刷新页面时都显示一个新图像，该图像现在正在运行，我的问题是选择这些图像，其中有数百种.png和.jpg。按名称键入每个图像甚至重命名它们似乎都非常麻烦，如何更改代码以使所有图像都保存在“图像”文件夹中？

代码已发布。

<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>✌</title>
  </head>

  <body> <!-- This piece of Javascript will randomly decide an image for your homepage. -->

    <script>
      var pictures = ['images/Aging.png', 'images/Teddy.png', 'images/Socrates.png',];
      var picture = pictures[Math.floor(Math.random() * pictures.length)];
      document.write('<img src="' + picture + '"/>');
    </script>

  </body>
</html>

Answer 1

假设您有100张图片。最简单的操作是使用id重命名它们（例如，将1.jpg更改为100.jpg），然后使用其名称随机调用图像。

pip3 install awscli --upgrade

另一个问题是图像的位置。其他计算机无法通过Internet从世界上的其他地方浏览文件夹，因此您需要在托管网站的地方托管它们。

但是，如果创建该网站以供本地浏览，则不会出现此问题。

编辑：您可以验证文件是否存在于js中（通过ajax调用），但是我认为最简单的方法是将所有png文件转换为jpg（反之亦然）。有些cool utilities可以轻松转换文件。

您可以使用function getRandomInt(max) { // number between 1 & max return ( Math.floor(Math.random() * Math.floor(max)) )+1; } let img = document.getElementById("yourImg"); img.src = getRandomInt(100) +".jpg";和索引来重命名所有mv文件。

带有*.jpg个文件的示例：

script.sh

.txt

控制台视图：

i=1
for name in *.txt; do
        mv $name $i.txt
        i=$((i+1))
done

编辑2：

您必须使用子目录，随机名称和扩展名来创建url路径。

这里有一些代码可以帮助您入门：）

$> mkdir a
$> cd a
$> touch a.txt
$> touch b.txt
$> touch zerg.txt
$> touch heyy.txt
$> ls
a.txt  b.txt  heyy.txt  script.sh  zrg.txt
$> nano script.sh
$> chmod +x script.sh
$> ./script.sh
$> ls
1.txt  2.txt  3.txt  4.txt  script.sh

Answer 2

您可以按照此处here的说明使用Fisher-Yates随机播放算法执行此操作：

function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

// Used like so
var arr = ['images/Aging.png', 'images/Teddy.png', 'images/Socrates.png'];
arr = shuffle(arr);
console.log(arr);

通过这种方式，您始终可以始终以相同的顺序打印阵列键，但是每次都使用不同的值。我希望这会有所帮助！

如何使用javascript以随机顺序显示文件夹中的图像？

2 个答案: