javascript實(shí)現(xiàn)點(diǎn)贊或踩加一，再點(diǎn)一次減一的效果

好多新手在網(wǎng)上找不到點(diǎn)贊效果的代碼，今天給大家分享一個(gè)采用js寫的簡單方法(有點(diǎn)錯(cuò)誤，已修正)

效果圖如下

HTML代碼

可直接ctrl + c復(fù)制代碼

30

30

CSS代碼

可直接ctrl + c復(fù)制代碼(注：樣式不一樣自己調(diào)，請(qǐng)根據(jù)自行需要修改)

.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復(fù)制代碼

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

}

作為一個(gè)前端小白，代碼比較拙劣，如有問題請(qǐng)指出，我一定悉心改正，謝謝！

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎(jiǎng)勵(lì)來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎(jiǎng)

總結(jié)

以上是生活随笔為你收集整理的简单点赞效果html,js实现点赞效果的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。