HTML - 如何在 div 内的 img=src 地址中生成随机数

HTML - How to generate a random number in an img=src address inside a div

Hi_I试图让一个随机数出现在div中的img src=地址内,这样每次div都会生成一个随机图像已加载。

我有10张图片,它们的目录地址是:

"pictures/number1.jpg"
"pictures/number2.jpg"
"pictures/number3.jpg"
................
"pictures/number10.jpg"

我可以 select 随机选择其中之一 Javascript:

var num = Math.floor(Math.random() * 10 + 1); 
img.src = "pictures/number" +num +".jpg";

这会生成一个介于 1 和 10 之间的随机数,并将其放入地址中以定位图像。 当在 Javascript 文件中使用 img.src 时,此方法非常有效,但我想知道当 img src= 是 HTML 页面的一部分时是否可以使用此方法。我正在尝试对以下 HTML 代码应用类似的过程:

<script>
var num = Math.floor(Math.random() * 10 + 1); 
randomimage = "pictures/number" +num +".jpg";
</script>

<div id="JohnDIV" align="center"> <img src=randomimage alt="If you can see this, then the image didn't load properly" class="myclass1" /> </div>
<div id="JackDIV" align="center"> <img src=randomimage alt="If you can see this, then the image didn't load properly" class="myclass1" /> </div>
<div id="JaneDIV" align="center"> <img src=randomimage alt="If you can see this, then the image didn't load properly" class="myclass1 /> </div>

这不起作用,它只是向我显示 alt= 消息。我不确定我是否正确定义了 randomimage。 我真的很困惑如何以正确的方式去做这件事,任何帮助将不胜感激!

提前致谢!

为 img 标签分配一个 id

<img src="" alt="If you can see this, then the image didn't load properly" class="myclass1" id="sample"/>

在您的 javascript 中,您可以随时添加您选择的 src

<script>
var num = Math.floor(Math.random() * 10 + 1); 
randomimage = "pictures/number" +num +".jpg";
document.getElementById('sample').src=randomImage;
</script>

编辑

至于为什么您的代码不起作用:您不能将 randomimage 应用到纯 HTML 中的图像源。您必须使用 Javascript 来做到这一点。为此,您必须 select 您想要操作的元素并通过 Javascript.

修改 src 属性

既然你用 jQuery 标记了它,我将开始使用它!

您可以在 myClass1 class 上使用 .each() 循环来遍历每个图像并使用给定的 class 更改每个图像的图像 src。

Fiddle

$('.myClass1').each(function() {

  var num = Math.floor(Math.random() * 10 + 1),
    img = $(this);

  img.attr('src', 'pictures/number' + num + '.jpg');
  img.attr('alt', 'Src: ' + img.attr('src'));

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="JohnDiv">
  <img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
  <img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
  <img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
  <img src="" class="myClass1" alt="Not Working!" />
</div>

出于测试目的,图像的 alt 属性设置为图像的 src

编辑

这是另一个使用普通 Javascript 的解决方案。

Fiddle

var imgs = document.getElementsByClassName('myClass1');

for (var i = 0; i < imgs.length; i++) {
  var num = Math.floor(Math.random() * 10 + 1);
  imgs[i].src = 'pictures/number' + num + '.jpg';
  imgs[i].alt = imgs[i].src;
}
<div class="JohnDiv">
  <img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
  <img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
  <img src="" class="myClass1" alt="Not Working!" />
</div>
<div class="JohnDiv">
  <img src="" class="myClass1" alt="Not Working!" />
</div>