js实现消息内容点赞代码
时间: 2023-03-26 18:03:14 浏览: 108
点赞效果及功能代码
5星 · 资源好评率100%
可以使用以下代码实现消息内容点赞功能:
HTML:
```
<div class="message">
<p>这是一条消息</p>
<button class="like-btn">点赞</button>
<span class="like-count"></span>
</div>
```
CSS:
```
.like-btn {
background-color: #fff;
border: 1px solid #ccc;
border-radius: 4px;
color: #333;
cursor: pointer;
padding: 4px 8px;
}
.like-btn:hover {
background-color: #f5f5f5;
}
.like-count {
margin-left: 8px;
}
```
JavaScript:
```
var likeBtns = document.querySelectorAll('.like-btn');
likeBtns.forEach(function(btn) {
var countEl = btn.nextElementSibling;
var count = parseInt(countEl.textContent);
btn.addEventListener('click', function() {
count++;
countEl.textContent = count;
});
});
```
阅读全文