js實(shí)現(xiàn)點(diǎn)贊效果

更新時(shí)間：2020年03月16日 11:18:10 作者：前端小白kk

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)點(diǎn)贊效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

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

效果圖如下

HTML代碼

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

<div class="dian">
 <div id="zan">
 <img src="images/college_Likes_ic3.png" alt="很棒，贊一個(gè)">
 <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)，請(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è)前端小白，代碼比較拙劣，如有問(wèn)題請(qǐng)指出，我一定悉心改正，謝謝！

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

您可能感興趣的文章:

相關(guān)文章

在chrome瀏覽器中，防止input[text]和textarea在聚焦時(shí)出現(xiàn)黃色邊框的解決方法
chrome瀏覽器不管對(duì)于開(kāi)發(fā)者還是一般用戶(hù)都可以說(shuō)是一個(gè)相當(dāng)優(yōu)秀的網(wǎng)頁(yè)瀏覽器，但是在開(kāi)發(fā)中，讓人感覺(jué)很多余的一個(gè)特性就是，在表單項(xiàng)中的控件聚焦時(shí)總會(huì)出現(xiàn)一個(gè)黃色邊框
2011-05-05
layui實(shí)現(xiàn)點(diǎn)擊按鈕給table添加一行
想實(shí)現(xiàn)點(diǎn)擊按鈕在表格添加一行的功能，但發(fā)現(xiàn)layui并未集成該工具欄，因此，需要自己手動(dòng)添加這個(gè)功能；這篇文章主要介紹了layui點(diǎn)擊按鈕給table添加一行,需要的朋友可以參考下
2018-08-08
js獲取判斷上傳文件后綴名的示例代碼
本篇文章主要是對(duì)js獲取判斷上傳文件后綴名的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助
2014-02-02
JS訪(fǎng)問(wèn)DOM節(jié)點(diǎn)方法詳解
這篇文章主要介紹了JS訪(fǎng)問(wèn)DOM節(jié)點(diǎn)方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了JS訪(fǎng)問(wèn)DOM節(jié)點(diǎn)的相關(guān)函數(shù)與使用方法,需要的朋友可以參考下
2016-11-11
JavaScript enum枚舉類(lèi)型定義及使用方法
這篇文章主要介紹了JavaScript enum枚舉類(lèi)型定義及使用方法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下
2020-05-05
js中的原生網(wǎng)絡(luò)請(qǐng)求解讀
這篇文章主要介紹了js中的原生網(wǎng)絡(luò)請(qǐng)求解讀，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-12-12
layui輸入框只允許輸入中文且判斷長(zhǎng)度的例子
今天小編就為大家分享一篇layui輸入框只允許輸入中文且判斷長(zhǎng)度的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2019-09-09
微信小程序版本自動(dòng)更新的方法
這篇文章主要介紹了微信小程序版本自動(dòng)更新的方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2019-06-06
如何使用工具規(guī)范前端項(xiàng)目的commits與changelog技巧
這篇文章主要為大家介紹了如何使用工具規(guī)范前端項(xiàng)目的commits與changelog技巧詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2023-02-02
JavaScript編寫(xiě)棋盤(pán)覆蓋代碼詳解
這篇文章主要介紹了JavaScript編寫(xiě)棋盤(pán)覆蓋代碼詳解,需要的朋友可以參考下
2017-08-08