如何用JavaScript编写点赞功能实现动态点赞效果？

本文共计545个文字，预计阅读时间需要3分钟。

JavaScript实现点赞或踩加一的效果，以下是一个简单的方法，包括HTML代码和JavaScript代码：

点赞与踩功能示例

0 0

效果图：点赞 (0) 踩 (0)

点击点赞按钮，点赞数加一，并移除踩按钮的disliked类，使其恢复默认状态。点击踩按钮，踩数加一，并移除点赞按钮的liked类。

注意：此代码假定按钮和计数器元素具有正确的类名和ID。在实际应用中，您可能需要根据您的HTML结构调整这些值。

javascript实现点赞或踩加一，再点一次减一的效果

好多新手在网上找不到点赞效果的代码，今天给大家分享一个采用js写的简单方法（有点错误，已修正）

效果图如下

HTML代码

可直接ctrl + c复制代码

<div class="dian"> <div id="zan"> <img src="images/college_Likes_ic3.png" alt="很棒，赞一个"> <div id="num1">30</div> </div> <div id="cai"> <img src="images/college_Likes_ic.png" alt="不行，踩一下"> <div id="num2">30</div> </div> </div>

CSS代码

可直接ctrl + c复制代码（注：样式不一样自己调，请根据自行需要修改）

.dian { display: flex; flex-direction: row; } #zan, #cai { width: 55px; height: 22px; display: flex; flex-direction: row; justify-content: space-between; background-color: #F3F3F3; margin: 0 10px; border-radius: 6px; user-select: none; cursor: pointer; } #zan img, #cai img { width: 14px; height: 14px; margin: 5px 5px 0 5px; } #zan #num1, #cai #num2 { line-height: 22px; margin-right: 3px; }

JS代码

可直接ctrl + c复制代码

var zan = document.getElementById('zan'); var cai = document.getElementById('cai'); var num1 = document.getElementById('num1'); var num2 = document.getElementById('num2'); var flag1 = 0; var flag2 = 0; zan.onclick = function() { if (flag1 == 0) { num1.innerHTML++; } if (flag1 == 1) { num1.innerHTML--; } if (flag1 == 2) { num1.innerHTML++; flag1 = 0; } flag1++; } cai.onclick = function() { if (flag2 == 0) { num2.innerHTML++; } if (flag2 == 1) { num2.innerHTML--; } if (flag2 == 2) { num2.innerHTML++; flag2 = 0; } flag2++; }

作为一个前端小白，代码比较拙劣，如有问题请指出，我一定悉心改正，谢谢！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持易盾网络。