用js实现一个点赞效果
时间: 2023-06-18 10:07:07 浏览: 110
js实现点赞效果
可以用以下代码实现一个简单的点赞效果:
HTML:
```html
<button id="likeBtn" class="like-btn">
<i class="fa fa-thumbs-up"></i>
<span>0</span>
</button>
```
CSS:
```css
.like-btn {
border: none;
background: none;
color: #999;
cursor: pointer;
padding: 0;
font-size: 16px;
}
.like-btn:hover {
color: #333;
}
.like-btn .fa {
margin-right: 5px;
}
```
JavaScript:
```js
const likeBtn = document.getElementById('likeBtn');
const likeCount = likeBtn.querySelector('span');
let count = 0;
likeBtn.addEventListener('click', () => {
count++;
likeCount.textContent = count;
});
```
这段代码会在页面中创建一个带有计数器的点赞按钮。每次点击按钮,计数器会加1,并且计数器的值会更新到页面上。你可以根据需要修改按钮的样式和计数器的初始值。
阅读全文