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 相关文章推荐
chrome原生方法之数组
Nov 30 Javascript
js函数返回多个返回值的示例代码
Nov 05 Javascript
使用js实现关闭js弹出层的窗口
Feb 10 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
JS写XSS cookie stealer来窃取密码的步骤详解
Nov 20 Javascript
详解VUE2.X过滤器的使用方法
Jan 11 Javascript
基于vue监听滚动事件实现锚点链接平滑滚动的方法
Jan 17 Javascript
原生js检测页面加载完毕的实例
Sep 11 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
Nov 14 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 Javascript
微信小程序开发(三):返回上一级页面并刷新操作示例【页面栈】
Jun 01 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
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
php之static静态属性与静态方法实例分析
2015/07/30 PHP
详解PHP中的外观模式facade pattern
2018/02/05 PHP
超级有用的13个基于jQuery的内容滚动插件和教程
2011/07/31 Javascript
分页栏的web标准实现
2011/11/01 Javascript
正负小数点后两位浮点数实现原理及代码
2013/09/06 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
2015/06/05 Javascript
JS组件Form表单验证神器BootstrapValidator
2016/01/26 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
Jquery遍历select option和添加移除option的实现方法
2016/08/26 Javascript
JavaScript创建对象的七种方式(推荐)
2017/06/26 Javascript
激动人心的 Angular HttpClient的源码解析
2017/07/10 Javascript
对存在JavaScript隐式类型转换的四种情况的总结(必看篇)
2017/08/31 Javascript
Nuxt.js SSR与权限验证的实现
2018/11/21 Javascript
微信小程序公用参数与公用方法用法示例
2019/01/09 Javascript
layui table设置某一行的字体颜色方法
2019/09/05 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
2019/11/19 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
Python读取properties配置文件操作示例
2018/03/29 Python
Python常见MongoDB数据库操作实例总结
2018/07/24 Python
python进阶之自定义可迭代的类
2019/08/20 Python
django表单中的按钮获取数据的实例分析
2020/07/31 Python
python将字典内容写入json文件的实例代码
2020/08/12 Python
前端制作动画的几种方式(css3,js)
2016/12/12 HTML / CSS
中医临床专业自我鉴定范文
2014/01/15 职场文书
小小的船教学反思
2014/02/21 职场文书
关于爱国的演讲稿
2014/05/07 职场文书
媒体宣传策划方案
2014/05/25 职场文书
农民工讨薪标语
2014/06/26 职场文书
关于读书的演讲稿500字
2014/08/27 职场文书
2014年小学教学工作总结
2014/11/13 职场文书
导游词之南京栖霞山
2019/10/18 职场文书
话题作文之学会尊重
2019/12/16 职场文书
HAM-2000摩机图
2021/04/22 无线电
Python编程根据字典列表相同键的值进行合并
2021/10/05 Python