可以给出实现代码吗?只需要html和js还有css的即可
时间: 2023-11-24 17:05:18 浏览: 39
以下是一个简单的实现选中头像投票效果的代码示例,包括 HTML、CSS 和 JavaScript:
HTML 代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>选中头像投票效果</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>请选择你喜欢的头像进行投票:</h1>
<div id="avatar-container">
<img class="avatar" src="avatar1.jpg" alt="头像1">
<img class="avatar" src="avatar2.jpg" alt="头像2">
<img class="avatar" src="avatar3.jpg" alt="头像3">
</div>
<div id="vote-result"></div>
<script src="script.js"></script>
</body>
</html>
```
CSS 代码:
```css
h1 {
text-align: center;
}
#avatar-container {
display: flex;
justify-content: center;
}
.avatar {
border: 1px solid #ccc;
padding: 10px;
margin: 10px;
cursor: pointer;
}
.avatar:hover {
border-color: #333;
}
#vote-result {
text-align: center;
font-size: 20px;
margin-top: 20px;
}
```
JavaScript 代码:
```javascript
// 初始化投票结果为0
var voteResults = [0, 0, 0];
// 为每个头像添加点击事件
var avatars = document.getElementsByClassName('avatar');
for (var i = 0; i < avatars.length; i++) {
avatars[i].addEventListener('click', function() {
// 获取当前头像的索引
var index = Array.from(avatars).indexOf(this);
// 投票结果加1
voteResults[index]++;
// 更新投票结果显示
var voteResult = document.getElementById('vote-result');
voteResult.innerHTML = '目前投票结果:头像1得票数为' + voteResults[0] + ',头像2得票数为' + voteResults[1] + ',头像3得票数为' + voteResults[2];
// 发送投票数据到后台服务器进行处理(使用 Ajax 技术)
// ...
});
}
```
这是一个简单的实现选中头像投票效果的代码示例,仅供参考。实际实现中还需要考虑更多的细节和安全问题。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![html](https://img-home.csdnimg.cn/images/20210720083451.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_c1.png)
![-](https://csdnimg.cn/download_wenku/file_type_column_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)