<!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")
![](https://profile-avatar.csdnimg.cn/default.jpg!4)
HTML中点击按钮随机切换图片
- 写回答
- 好问题 0 提建议
- 追加酬金
- 关注问题
- 邀请回答
-
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>
本回答被题主选为最佳回答 , 对您是否有帮助呢?解决 无用评论 打赏 举报
悬赏问题
- ¥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 斯坦福自动漂移非线性模型反解