js实现点赞效果

javascript实现点赞或踩加一，再点一次减一的效果

创新互联一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！为您提供成都网站建设、网站建设、成都网页设计、小程序制作、成都网站开发、成都网站制作、成都软件开发、app软件定制开发是成都本地专业的网站建设和网站设计公司，等你一起来见证！

好多新手在网上找不到点赞效果的代码，今天给大家分享一个采用js写的简单方法（有点错误，已修正）

效果图如下

js实现点赞效果

HTML代码

可直接ctrl + c复制代码

CSS代码

可直接ctrl + c复制代码（注：样式不一样自己调，请根据自行需要修改）

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

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

作为一个前端小白，代码比较拙劣，如有问题请指出，我一定悉心改正，谢谢！

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持创新互联。

文章名称：js实现点赞效果
转载源于：http://mswzjz.cn/article/jppisc.html

网站建设知识

js实现点赞效果

其他资讯