如何为JS生成的随机刷新图片添加可点击跳转超链接

完全可以实现你要的效果，而且可以做到配置和逻辑分离，后续加图、改图片属性不用动核心逻辑。
核心修改思路：

• 把原本只存图片路径的一维数组，改成存储图片全量配置的对象数组，每张图的路径、跳转地址、alt、高度等自定义属性全部存在对应配置项里
• 简化随机数逻辑，数组从0下标开始存储，不需要额外判断随机数为0的边界情况
• 弃用document.write直接输出字符串的写法，改用原生DOM方法创建<a>和<img>标签，最终生成的结构和你手写的原生HTML结构完全一致，方便后续调整。

完整代码 #

首先在HTML页面需要展示随机图片的位置放一个容器：

<div id="randomImgContainer"></div>

然后替换原来的JS代码为以下内容：

function random_imglink() {
  // 图片配置列表，新增/修改图片直接改这个数组就行
  const imgConfigs = [
    {
      src: "1.png",
      link: "1.html",
      alt: "图片1",
      height: 333,
      border: 0
    },
    {
      src: "2.png",
      link: "2.html",
      alt: "图片2",
      height: 333,
      border: 0
    },
    {
      src: "3w.png",
      link: "3.html",
      alt: "car",
      height: 333,
      border: 0
    },
    {
      src: "4w.png",
      link: "4.html",
      alt: "图片4",
      height: 333,
      border: 0
    }
  ]

  // 生成合法随机下标
  const randomIndex = Math.floor(Math.random() * imgConfigs.length)
  const currentConfig = imgConfigs[randomIndex]

  // 创建a跳转标签
  const aNode = document.createElement('a')
  aNode.href = currentConfig.link

  // 创建img图片标签，绑定所有配置属性
  const imgNode = document.createElement('img')
  imgNode.src = currentConfig.src
  imgNode.alt = currentConfig.alt
  imgNode.height = currentConfig.height
  imgNode.border = currentConfig.border

  // 拼接标签结构，插入到页面容器中
  aNode.appendChild(imgNode)
  document.getElementById('randomImgContainer').appendChild(aNode)
}

// 页面加载完成后执行初始化
window.addEventListener('load', random_imglink)

使用说明 #

• 后续新增随机图片，只需要往imgConfigs数组里新增一个配置对象，填入对应的src、跳转链接、自定义属性即可，不需要修改其他逻辑代码
• 如果需要给图片加新的属性（比如width、自定义class、loading懒加载属性等），只需要在配置对象里加对应键值对，同时在创建imgNode的位置加一行属性赋值代码即可
• 最终渲染出的页面结构和你参考写的原生<a href="3.html"> <img src="3w.png" alt="car" height="333"> </a>完全一致，没有额外冗余结构。

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