web前端点击对应的人物可以播放对应的音乐代码实现
时间: 2024-02-28 21:53:43 浏览: 21
实现这个功能,需要用到HTML、CSS和JavaScript。以下是一个简单的实现方式:
HTML代码:
```html
<div class="character" id="character1">
<img src="character1.png" alt="character1">
<audio id="audio1" src="audio1.mp3"></audio>
</div>
<div class="character" id="character2">
<img src="character2.png" alt="character2">
<audio id="audio2" src="audio2.mp3"></audio>
</div>
```
CSS代码:
```css
.character {
display: inline-block;
margin: 10px;
cursor: pointer;
}
.character img {
width: 100px;
height: 100px;
}
```
JavaScript代码:
```javascript
var audio1 = document.getElementById("audio1");
var audio2 = document.getElementById("audio2");
document.getElementById("character1").addEventListener("click", function() {
audio1.play();
});
document.getElementById("character2").addEventListener("click", function() {
audio2.play();
});
```
这个代码实现了两个角色,点击每个角色可以播放与之对应的音乐。你可以根据自己的需要添加更多的角色和音乐,并在JavaScript代码中添加相应的事件监听器。
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)