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í)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

js
點贊

相關(guān)文章

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