时间戳

首页 > 解决方案 > HTML刷新时的随机图像

javascript - HTML刷新时的随机图像

问题描述

我有这个网站，当你刷新它时，它会从 JS 数组中调出一个随机图像，这是代码

<html>
<head>
    <title>Refresh for image!</title>
</head>
<body>
    <script type="text/javascript">
<!--
 var imlocation = "images/";
 var currentdate = 0;
 var image_number = 0;
 function ImageArray (n) {
   this.length = n;
   for (var i =1; i <= n; i++) {
     this[i] = ' '
   }
 }
 image = new ImageArray(13)
 image[0] = '1.jpg'
 image[1] = '2.jpg'
 image[2] = '3.jpg'
 image[3] = '4.jpg'
 image[4] = '5.jpg'
 image[5] = '6.jpg'
 image[6] = '7.jpg'
 image[7] = '8.jpg'
 image[8] = '9.jpg'
 image[9] = '10.jpg'
 image[10] = '11.jpg'
 image[11] = '12.jpg'
 image[12] = '13.jpg'
 image[13] = '14.jpg'
 image[14] = '15.jpg'
 image[15] = '16.jpg'
 image[16] = '17.jpg'
 image[17] = '18.jpg'
 image[18] = '19.jpg'
 var rand = 60/image.length
 function randomimage() {
    currentdate = new Date()
    image_number = currentdate.getSeconds()
    image_number = Math.floor(image_number/rand)
    return(image[image_number])
 }
 document.write("<img src='" + imlocation + randomimage()+ "'>");
//-->
</script>
</body>
</html>

我一直在寻找不同的方法来使代码不那么笨拙和更统一。我希望能够将 .png、.jpg 和 .gif 文件转储到文件夹中，而不必每次都操作代码以将新图像添加到数组中。我还发现，尽管是随机的，但每次刷新时我都会得到很多相同的图像，我认为这是基于我用来随机化图像的方法。

任何人都可以帮助将文件转储到文件夹中并让代码完成工作而不是数组，任何人都可以帮助我随机化每个图像。

标签： javascripthtmlcssimageweb

解决方案

你几乎在那里。不要在 JS 中设置图像名称，只需在将它们保存到文件夹时给它们数字名称。然后你的 javascript 可能看起来像这样：

function getRandomInt(min, max) {
  min = Math.ceil(min);
  max = Math.floor(max);
  return Math.floor(Math.random() * (max - min)) + min; // The maximum is exclusive and the minimum is inclusive
}

document.write('<img src="images/' + getRandomInt(1, 20) + '.jpg">')

推荐阅读