js实现点赞效果


Posted in Javascript onMarch 16, 2020

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

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

效果图如下

js实现点赞效果

js实现点赞效果

HTML代码

可直接ctrl + c复制代码

<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复制代码(注:样式不一样自己调,请根据自行需要修改)

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

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery Mobile 导航栏代码
Nov 01 Javascript
Seajs的学习笔记
Mar 04 Javascript
JavaScript中判断整数的多种方法总结
Nov 08 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 Javascript
实例详解AngularJS实现无限级联动菜单
Jan 15 Javascript
微信小程序开发之圆形菜单 仿建行圆形菜单实例
Dec 12 Javascript
详解JavaScript 中getElementsByName在IE中的注意事项
Feb 21 Javascript
vue+Java后端进行调试时解决跨域问题的方式
Oct 19 Javascript
JS实现根据指定值删除数组中的元素操作示例
Aug 02 Javascript
vue异步axios获取的数据渲染到页面的方法
Aug 09 Javascript
详解vantUI框架在vue项目中的应用踩坑
Dec 06 Javascript
详解一些适用于Node.js的命名约定
Dec 08 Javascript
Javascript Web Worker使用过程解析
Mar 16 #Javascript
Javascript ParentNode和ChildNode接口原理解析
Mar 16 #Javascript
JS手写一个自定义Promise操作示例
Mar 16 #Javascript
JS函数参数的传递与同名参数实例分析
Mar 16 #Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
Mar 16 #Javascript
JS函数本身的作用域实例分析
Mar 16 #Javascript
JavaScript实现tab栏切换效果
Mar 16 #Javascript
You might like
德生S2000收音机更换“钕铁硼”全频扬声器
2021/03/02 无线电
php统计数组元素个数的方法
2015/07/02 PHP
初识ThinkPHP控制器
2016/04/07 PHP
thinkPHP5.0框架命名空间详解
2017/03/18 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
jquery 笔记 事件
2011/11/02 Javascript
firefox浏览器不支持innerText的解决方法
2013/08/07 Javascript
jquery操作下拉列表、文本框、复选框、单选框集合(收藏)
2014/01/08 Javascript
jquery禁用右键示例
2014/04/28 Javascript
javascript操作Cookie(设置、读取、删除)方法详解
2015/03/18 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
JavaScript实现广告的关闭与显示效果实例
2015/07/02 Javascript
使用JQuery实现的分页插件分享
2015/11/05 Javascript
js仿支付宝多方框输入支付密码效果
2016/09/27 Javascript
Angular.js中用ng-repeat-start实现自定义显示
2016/10/18 Javascript
原生js实现电商侧边导航效果
2017/01/19 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
jquery获取img的src值实例介绍
2019/01/16 jQuery
js字符串类型String常用操作实例总结
2019/07/05 Javascript
Python矩阵常见运算操作实例总结
2017/09/29 Python
Python列表生成式与生成器操作示例
2018/08/01 Python
Python3 单行多行万能正则匹配方法
2019/01/07 Python
详解Python网络框架Django和Scrapy安装指南
2019/04/01 Python
python gdal安装与简单使用
2019/08/01 Python
python实现逆滤波与维纳滤波示例
2020/02/26 Python
HTML5 input placeholder 颜色修改示例
2014/05/30 HTML / CSS
The Hut德国站点:时装、家居用品、美容等
2016/09/23 全球购物
Windows和Linux动态库应用异同
2016/04/17 面试题
服务行业个人求职的自我评价
2013/12/12 职场文书
优秀的自荐信要注意哪些
2014/01/03 职场文书
酒店前厅员工辞职信
2014/01/08 职场文书
八年级物理教学反思
2014/01/19 职场文书
党性观念心得体会
2014/09/03 职场文书
2014年最新离婚协议书范本
2014/10/11 职场文书
中学团支部工作总结
2015/08/13 职场文书
大学自主招生自荐信(2016精选篇)
2016/01/28 职场文书