js实现点赞效果

效果图如下


HTML代码

<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代码

.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代码

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++;
}