js實(shí)現(xiàn)點(diǎn)贊效果
javascript實(shí)現(xiàn)點(diǎn)贊或踩加一,再點(diǎn)一次減一的效果
好多新手在網(wǎng)上找不到點(diǎn)贊效果的代碼,今天給大家分享一個(gè)采用js寫的簡單方法(有點(diǎn)錯(cuò)誤,已修正)
效果圖如下


HTML代碼
可直接ctrl + c復(fù)制代碼
<div class='dian'> <div id='zan'> <img src='http://www.leifengta.com.cn/bcjs/images/college_Likes_ic3.png' alt='很棒,贊一個(gè)'> <div id='num1'>30</div> </div> <div id='cai'> <img src='http://www.leifengta.com.cn/bcjs/images/college_Likes_ic.png' alt='不行,踩一下'> <div id='num2'>30</div> </div></div>
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í)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. ASP新手必備的基礎(chǔ)知識(shí)2. CentOS郵箱服務(wù)器搭建系列——SMTP服務(wù)器的構(gòu)建( Postfix )3. PHP基礎(chǔ)之生成器4——比較生成器和迭代器對(duì)象4. asp文件用什么軟件編輯5. Vue axios獲取token臨時(shí)令牌封裝案例6. 利用CSS制作3D動(dòng)畫7. golang中json小談之字符串轉(zhuǎn)浮點(diǎn)數(shù)的操作8. js實(shí)現(xiàn)計(jì)算器功能9. 通過IEAD+Maven快速搭建SSM項(xiàng)目的過程(Spring + Spring MVC + Mybatis)10. JS中6個(gè)對(duì)象數(shù)組去重的方法

網(wǎng)公網(wǎng)安備