简单点赞效果html,js实现点赞效果
时间: 2024-01-07 07:02:46 浏览: 23
好的,以下是一个简单的点赞效果的HTML和JS实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>点赞效果</title>
<style>
.like-btn {
display: inline-block;
padding: 5px 10px;
background-color: #eaeaea;
border-radius: 5px;
cursor: pointer;
}
.liked {
background-color: pink;
}
</style>
</head>
<body>
<div class="like-btn">点赞</div>
<script>
var likeBtn = document.querySelector('.like-btn');
var isLiked = false;
likeBtn.addEventListener('click', function() {
if (!isLiked) {
likeBtn.classList.add('liked');
likeBtn.innerHTML = '取消点赞';
} else {
likeBtn.classList.remove('liked');
likeBtn.innerHTML = '点赞';
}
isLiked = !isLiked;
});
</script>
</body>
</html>
```
这段代码实现了一个简单的点赞效果,当用户点击“点赞”按钮时,按钮的背景颜色会变成粉色,文字会变成“取消点赞”,再次点击时则会恢复原状。