CN Bflf 2023-05-22 09:29 采纳率: 90%
浏览 46
已结题

HTML中点击按钮随机切换图片

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <input type="button" value="切换" id="btn">
    <br>
    <img src="images/1.jpg" width="300" id="img">
   
    <script>
        
    </script>
</body>

</html>

```这个是代码片段具体该怎样实现呀

![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/442432917486144.jpg "#left")
  • 写回答

5条回答 默认 最新

  • usp1994 2023-05-23 17:56
    关注

    喏

    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="button" value="切换" id="btn">
    <br>
    <img src="images/1.jpg" width="300" id="img">
   
    <script>
        const imgArr = ['images/1.jpg', 'images/2.jpg', 'images/3.jpg']; // 图片地址数组

        const btn = document.getElementById('btn');
        const img = document.getElementById('img');

        btn.addEventListener('click', () => {
            const randomIndex = Math.floor(Math.random() * imgArr.length); // 随机数
            const randomSrc = imgArr[randomIndex]; // 随机图片地址
            img.src = randomSrc; // 修改图片地址
        });
    </script>
</body>
</html>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(4条)

报告相同问题？

问题事件

  • 系统已结题 6月4日
  • 已采纳回答 5月27日
  • 修改了问题 5月22日
  • 创建了问题 5月22日

悬赏问题

  • ¥15 这种情况的伯德图和奈奎斯特曲线怎么分析？
  • ¥50 paddleocr带斜线的0很容易识别成9
  • ¥15 电子档案元素采集（tiff及PDF扫描图片）
  • ¥15 flink-sql-connector-rabbitmq使用
  • ¥15 zynq7015,PCIE读写延时偏大
  • ¥15 使用spss做psm（倾向性评分匹配）遇到问题
  • ¥20 vue+UEditor附件上传问题
  • ¥15 想做个WPS的自动化代码，不知道能做的起不。
  • ¥15 uniApp，生成安卓安卓包后，黑暗主题中间内容不生效，底部导航正常
  • ¥15 斯坦福自动漂移非线性模型反解