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。
$('.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 的解决方案。
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>
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。
$('.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 的解决方案。
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>