Java脚本HTML5图片标签中的随机图像

编程问答 2022-06-06

问题描述

尝试制作带有HTML5图片标签的随机图片（我有一组图片，所有图片都遵循模式“ imgN”，其中“ N”是从1到9的数字）。直到现在都不好。这就是我正在尝试的：

HTML代码是：

<picture id="heroimg">
    <source class="rand_webp_srcset" srcset="img1.webp" type="image/webp">
    <source class="rand_jpeg_srcset" srcset="img1.jpg" type="image/jpeg">
    <img class="rand_jpeg_src" src="img1.jpg">
</picture>

JavaScript代码为：

var randomNum = Math.floor(Math.random() * 9) + 1
document.getElementsByClassName('rand_webp_srcset').srcset = 'img' + randomNum + '.jpg';
document.getElementsByClassName('rand_jpeg_srcset').srcset = 'img' + randomNum + '.jpg';
document.getElementsByClassName('rand_jpeg_src').src = 'img' + randomNum + '.jpg';

有提示吗？ 谢谢。

编辑：这就是我的理解方式：

var randomNum = Math.floor(Math.random() * 9) + 1

var img = document.getElementById("rand_webp_srcset")
img.srcset='img/universo' + randomNum + '.webp'

var img = document.getElementById("rand_jpeg_srcset")
img.srcset='img/universo' + randomNum + '.jpg'

var img = document.getElementById("rand_jpeg_src")
img.srcset='img/universo' + randomNum + '.jpg'

解决方法

使用函数document.getElementsByClassName()时，将返回一个数组。只需添加您要修改的项目的索引，即document.getElementsByClassName('rand_webp_srcset')[0]。但是，在这种情况下，使用id会更好一些-请参见https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id 

var randomNum = Math.floor(Math.random() * 9) + 1
document.getElementsByClassName('rand_webp_srcset')[0].srcset = 'img' + randomNum + '.jpg';
document.getElementsByClassName('rand_jpeg_srcset')[0].srcset = 'img' + randomNum + '.jpg';
document.getElementsByClassName('rand_jpeg_src')[0].src = 'img' + randomNum + '.jpg';
<picture id="heroimg">
  <source class="rand_webp_srcset" srcset="img1.webp" type="image/webp">
  <source class="rand_jpeg_srcset" srcset="img1.jpg" type="image/jpeg">
  <img class="rand_jpeg_src" src="img1.jpg">
</picture>

htmlimageimagejavascriptrandomsrcset