js實現(xiàn)點贊效果
更新時間：2020年03月16日 11:18:10 作者：前端小白kk
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)點贊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
javascript實現(xiàn)點贊或踩加一，再點一次減一的效果
好多新手在網(wǎng)上找不到點贊效果的代碼，今天給大家分享一個采用js寫的簡單方法（有點錯誤，已修正）
效果圖如下
HTML代碼
可直接ctrl + c復(fù)制代碼
<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復(fù)制代碼（注：樣式不一樣自己調(diào)，請根據(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++;
}
作為一個前端小白，代碼比較拙劣，如有問題請指出，我一定悉心改正，謝謝！
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
詳解ES6之用let聲明變量以及l(fā)et loop機制
本篇文章主要介紹了詳解ES6之用let聲明變量以及l(fā)et loop機制，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
本篇文章主要是對js判斷ie版本號的簡單實現(xiàn)代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-03-03
本篇文章主要是對js實現(xiàn)文本框中焦點在最后位置的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所 幫助2014-03-03
這里說的滑移其實就是減速效果，能根據(jù)設(shè)定的坐標(biāo)平面移動。2008-09-09
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)從左向右滑動式輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-07-07
這篇文章主要介紹了JavaScript AOP編程,實例分析了javascript實現(xiàn)AOP編程的基本技巧,需要的朋友可以參考下2015-06-06
Bootstrap時間選擇器datetimepicker和daterangepicker使用實例解析
這篇文章主要為大家詳細(xì)解析了Bootstrap時間選擇器datetimepicker和daterangepicker使用實例,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-09-09
深入探討如何利用Canvas實現(xiàn)圖片壓縮與Base64轉(zhuǎn)換
隨著Web應(yīng)用的日益普及,圖片的處理和優(yōu)化已經(jīng)成為現(xiàn)代開發(fā)的關(guān)鍵部分,本文主要介紹了如何利用Canvas技術(shù),將圖片進行壓縮,并將其轉(zhuǎn)換為Base64格式,感興趣的小伙伴可以學(xué)習(xí)下2023-10-10
javascript實現(xiàn)仿銀行密碼輸入框效果的代碼
這篇文章通過實例代碼給大家介紹了javascript實現(xiàn)仿銀行密碼輸入框效果，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值，需要的朋友參考下吧2007-12-12
下面小編就為大家?guī)硪黄僯s實現(xiàn)畫一棵樹的示例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09