溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
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++;
}
作為一個前端小白，代碼比較拙劣，如有問題請指出，我一定悉心改正，謝謝！
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
