html+css+js实现点赞时点赞数加1,且爱心变成红色
时间: 2024-04-08 15:32:51 浏览: 28
要实现在点击点赞按钮时,点赞数加1并且爱心图标变成红色,可以结合HTML、CSS和JavaScript来完成。下面是一个示例的代码:
```html
<!DOCTYPE html>
<html>
<head>
<style>
.like-button {
display: inline-block;
padding: 5px 10px;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
}
.like-button .heart-icon {
color: gray;
transition: color 0.3s;
}
.like-button .like-count {
margin-left: 5px;
}
.liked {
color: red;
}
</style>
</head>
<body>
<div class="like-button" onclick="likeButtonClicked()">
<span class="heart-icon">❤</span>
<span class="like-count">0</span>
</div>
<script>
var likeCount = 0;
var likeButton = document.querySelector(".like-button");
var heartIcon = document.querySelector(".heart-icon");
var likeCountElement = document.querySelector(".like-count");
function likeButtonClicked() {
likeCount++;
likeCountElement.textContent = likeCount;
// 添加/移除liked类来改变爱心图标颜色
heartIcon.classList.toggle("liked");
}
</script>
</body>
</html>
```
在上面的示例中,我们创建了一个点赞按钮,包含一个爱心图标和一个用于显示点赞数的文本。通过在JavaScript中监听按钮的点击事件,我们可以在点击时将点赞数加1,并通过添加/移除CSS类来改变爱心图标的颜色。
当你点击点赞按钮时,点赞数会增加,并且爱心图标会变成红色。再次点击按钮,点赞数会继续增加,并且爱心图标会恢复原来的颜色。你可以根据需要修改CSS样式和图标来适应你的项目。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.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)