JS实现点赞效果（点击数字增加，再点击减少）

最新推荐文章于 2023-07-11 15:51:56 发布

于飞SEO

最新推荐文章于 2023-07-11 15:51:56 发布

阅读量4.1k

点赞数 6

分类专栏：站长技术交流

本文链接：https://blog.csdn.net/q906270629/article/details/118415166

版权

站长技术交流专栏收录该内容

235 篇文章 10 订阅

订阅专栏

前言

JS实现点赞效果，javascript实现点赞或踩加一，再点一次减一的效果，今天给大家分享一个采用js写的简单方法。

演示

一

HTML代码

<div class="dian"> 
 
    <div id="zan"> 
 
        <img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2558626780,13594805&fm=58" alt="很棒，赞一个"> 
 
        <div id="num1">30</div> 
 
    </div> 
 
   <div id="cai"> 
 
      <img src="https://dss1.baidu.com/6ONXsjip0QIZ8tyhnq/it/u=2415625921,231894416&fm=58" alt="不行，踩一下"> 
 
      <div id="num2">30</div> 
 
    </div> 
 
</div>

二

CSS代码（注：样式不一样自己调，请根据自行需要修改）

.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代码

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