生成一段前端代码,运行显示3个按键,生成3张图片,每点一个按键显示一张图片
时间: 2024-03-10 17:49:15 浏览: 21
好的,以下是一段基于HTML和JavaScript的前端代码,实现了您所描述的功能:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>按键显示图片</title>
</head>
<body>
<button id="button1">按键1</button>
<button id="button2">按键2</button>
<button id="button3">按键3</button>
<br>
<img id="image" src="" alt="">
<script>
var button1 = document.getElementById("button1");
var button2 = document.getElementById("button2");
var button3 = document.getElementById("button3");
var image = document.getElementById("image");
button1.onclick = function() {
image.src = "image1.jpg";
};
button2.onclick = function() {
image.src = "image2.jpg";
};
button3.onclick = function() {
image.src = "image3.jpg";
};
</script>
</body>
</html>
```
这段代码会在页面上生成三个按键和一个空白的图片框。每当用户点击一个按键时,相应的图片就会显示在图片框中。您只需要将三张图片分别命名为image1.jpg、image2.jpg和image3.jpg,并与HTML文件放在同一目录下即可。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![rar](https://img-home.csdnimg.cn/images/20210720083606.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)