13518219792
javascript实现点赞或踩加一，再点一次减一的效果
创新互联一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！ 以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！为您提供成都网站建设、网站建设、成都网页设计、小程序制作、成都网站开发、成都网站制作、成都软件开发、app软件定制开发是成都本地专业的网站建设和网站设计公司，等你一起来见证！
好多新手在网上找不到点赞效果的代码，今天给大家分享一个采用js写的简单方法（有点错误，已修正）
效果图如下
HTML代码
可直接ctrl + c复制代码
30
30
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++;
}作为一个前端小白，代码比较拙劣，如有问题请指出，我一定悉心改正，谢谢！
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。
