HTML 4环境下点击按钮随机展示游戏道具/地点/角色图片及对应文字的实现方法

你可以用HTML 4兼容的原生JavaScript完成这个需求，全程不需要引入额外工具，代码逻辑非常简单，一共分为三步：

1. 提前整理三类素材数据 #

把你准备好的游戏道具、地点、角色的图片路径、对应说明分别存在三个JS数组里，后续随机抽取直接从数组里取即可。

2. 编写HTML基础结构 #

在页面里预留3张图片的展示位、对应说明的展示位，再加上一个触发随机效果的按钮，给每个元素加唯一的id方便JS定位元素。

注意：HTML 4规范里img标签必须加alt属性，所有标签属性建议用双引号包裹，保证兼容性。

3. 编写随机抽取逻辑 #

写一个触发点击的函数，核心逻辑是分别给三类素材数组生成合法的随机下标，取出对应素材后替换页面上的图片地址和说明文本。

下面是完整可运行的示例代码，你直接替换里面的图片路径和说明文本就能用：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>游戏随机素材生成</title>
<script type="text/javascript">
// 道具素材数组，格式：[图片路径, 说明文本]
var items = [
  ["item1.jpg", "恢复药水：使用后回复50点生命值"],
  ["item2.jpg", "史诗钥匙：可以开启隐藏副本的大门"],
  ["item3.jpg", "火焰符文：给武器附加30点火焰伤害"]
];

// 地点素材数组
var locations = [
  ["loc1.jpg", "幽暗森林：常年被浓雾笼罩的原始森林，栖息着大量夜行魔物"],
  ["loc2.jpg", "暴风要塞：人类王国的核心主城，防御工事固若金汤"],
  ["loc3.jpg", "熔岩洞穴：龙族的栖息地，洞内温度常年超过100摄氏度"]
];

// 角色素材数组
var characters = [
  ["char1.jpg", "精灵弓箭手：射程极远的远程输出单位，移动速度快"],
  ["char2.jpg", "矮人战士：血量极高的近战坦克，对魔法伤害有额外抗性"],
  ["char3.jpg", "人类法师：掌握大范围AOE技能，身板较为脆弱"]
];

// 点击按钮触发的随机函数
function randomShow() {
  // 生成各分类的随机下标，范围是0到数组长度-1
  var randomItem = Math.floor(Math.random() * items.length);
  var randomLoc = Math.floor(Math.random() * locations.length);
  var randomChar = Math.floor(Math.random() * characters.length);

  // 替换道具图片和说明
  document.getElementById("itemImg").src = items[randomItem][0];
  document.getElementById("itemText").innerText = items[randomItem][1];

  // 替换地点图片和说明
  document.getElementById("locImg").src = locations[randomLoc][0];
  document.getElementById("locText").innerText = locations[randomLoc][1];

  // 替换角色图片和说明
  document.getElementById("charImg").src = characters[randomChar][0];
  document.getElementById("charText").innerText = characters[randomChar][1];
}
</script>
</head>
<body>
<button onclick="randomShow()">点击随机生成素材</button>

<div style="margin-top:20px;float:left;margin-right:30px;">
  <h3>游戏道具</h3>
  <img id="itemImg" src="" alt="游戏道具" width="200" height="200">
  <p id="itemText"></p>
</div>

<div style="margin-top:20px;float:left;margin-right:30px;">
  <h3>游戏地点</h3>
  <img id="locImg" src="" alt="游戏地点" width="200" height="200">
  <p id="locText"></p>
</div>

<div style="margin-top:20px;float:left;">
  <h3>游戏角色</h3>
  <img id="charImg" src="" alt="游戏角色" width="200" height="200">
  <p id="charText"></p>
</div>

</body>
</html>

新手注意事项 #

• 数组里的图片路径要换成你自己本地的对应路径，如果是网络图片直接填完整链接即可
• 可以随意往三个数组里加更多素材，代码会自动适配数组长度生成随机数，不需要修改其他逻辑
• 所有语法均兼容HTML 4规范，不需要做额外适配
• 如果需要默认展示一组素材，在body的onload属性里调用randomShow()函数即可

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