js实现点赞效果

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

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

效果图如下

HTML代码

可直接ctrl + c复制代码

<div class='dian'> <div id='zan'> <img src='https://www.haobala.com/bcjs/images/college_Likes_ic3.png' alt='很棒，赞一个'> <div id='num1'>30</div> </div> <div id='cai'> <img src='https://www.haobala.com/bcjs/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++;}

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

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