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

作為一個前端小白，程式碼比較拙劣，如有問題請指出，我一定悉心改正，謝謝！

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。