如何使用JavaScript实现点击随机图片跳转至对应专属页面

核心逻辑是将原来仅存储图片路径的单值数组，改为同时保存图片路径和对应跳转地址的对象数组，随机命中后分别给图片、跳转链接赋值即可，修改后的完整代码如下：

修改后的JavaScript代码 #

function getRandomImage() {
  // 数组每个元素存储对应图片的路径 + 跳转目标页面
  const imageList = [
    { imgSrc: "frames/1.png", targetUrl: "index1.html" },
    { imgSrc: "frames/2.png", targetUrl: "index2.html" },
    { imgSrc: "frames/3.png", targetUrl: "index3.html" },
    { imgSrc: "frames/4.png", targetUrl: "index4.html" },
    { imgSrc: "frames/5.png", targetUrl: "index5.html" },
    { imgSrc: "frames/6.png", targetUrl: "index6.html" },
    { imgSrc: "frames/7.png", targetUrl: "index7.html" },
    { imgSrc: "frames/8.png", targetUrl: "index8.html" },
    { imgSrc: "frames/9.png", targetUrl: "index9.html" },
    { imgSrc: "frames/10.png", targetUrl: "index10.html" }
  ];

  // 生成随机索引，原代码循环i<1实际只执行一次，这里直接省略冗余循环
  const randomIndex = Math.floor(Math.random() * imageList.length);
  const selectedItem = imageList[randomIndex];

  // 生成DOM，a标签绑定跳转地址，img绑定图片地址
  // 如果需要每次点击只保留最新的一张图片，把 += 改成 = 即可
  document.getElementById("result").innerHTML += `<a href="${selectedItem.targetUrl}"><img src="${selectedItem.imgSrc}" style="width:450px" /></a>`;
}

可直接复用的HTML代码 #

<button onclick="getRandomImage()">Show Image</button>
<div class="container">
  <span id="result" align="center"></span>
</div>

改动说明 #

• 替换原单值数组为对象数组，同时存储图片资源路径和对应跳转的页面地址，可根据实际需求自行修改每个targetUrl的取值
• 修正了原数组索引从1开始、索引0为空的问题，避免随机到空值导致加载异常
• 支持自主配置是否叠加展示图片，修改innerHTML的赋值方式即可

内容的提问来源于stack exchange，提问作者JockStrap