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 相关文章推荐
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
javascript实现的图片切割多块效果实例
May 07 Javascript
JS基于cookie实现来宾统计记录访客信息的方法
Aug 04 Javascript
SpringMVC返回json数据的三种方式
Dec 10 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
JS ES6中setTimeout函数的执行上下文示例
Apr 27 Javascript
对vux点击事件的优化详解
Aug 28 Javascript
模块化react-router配置方法详解
Jun 03 Javascript
javascript面向对象三大特征之继承实例详解
Jul 24 Javascript
VUE+node(express)实现前后端分离
Oct 13 Javascript
JavaScript仿京东秒杀倒计时
Mar 17 Javascript
javascript 易错知识点实例小结
Apr 25 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 cookie 作用范围?不要在当前页面使用你的cookie
2009/03/24 PHP
解析php addslashes()与addclashes()函数的区别和比较
2013/06/24 PHP
destoon整合ucenter后注册页面不跳转的解决方法
2014/06/21 PHP
Yii2中多表关联查询hasOne hasMany的方法
2017/02/15 PHP
PHP聚合式迭代器接口IteratorAggregate用法分析
2017/12/28 PHP
JavaScript高级程序设计 阅读笔记(十八) js跨平台的事件
2012/08/14 Javascript
JS下拉框内容左右移动效果的具体实现
2013/07/10 Javascript
JS跨域问题详解
2014/11/25 Javascript
javascript二维数组转置实例
2015/01/22 Javascript
基于jQuery.validate及Bootstrap的tooltip开发气泡样式的表单校验组件思路详解
2016/07/18 Javascript
详谈Ajax请求中的async:false/true的作用(ajax 在外部调用问题)
2017/02/10 Javascript
解决Extjs下拉框不显示的问题
2017/06/21 Javascript
解决React Native端口号修改的方法
2017/07/28 Javascript
javascript实现手动点赞效果
2019/04/09 Javascript
Vue利用Blob下载原生二进制数组文件
2019/09/25 Javascript
javascript实现前端input密码输入强度验证
2020/06/24 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python3计算三角形的面积代码
2017/12/18 Python
python针对mysql数据库的连接、查询、更新、删除操作示例
2019/09/11 Python
pytest中文文档之编写断言
2019/09/12 Python
python文件读取失败怎么处理
2020/06/23 Python
Django-imagekit的使用详解
2020/07/06 Python
Python爬虫之Spider类用法简单介绍
2020/08/04 Python
css3中flex布局宽度不生效的解决
2020/12/09 HTML / CSS
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
Ashford台湾:以折扣价提供奢华的男女用表款
2019/12/04 全球购物
护理专业毕业生自我鉴定
2013/10/08 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
党员培训思想汇报
2014/01/07 职场文书
建筑项目策划书
2014/01/13 职场文书
房地产促销活动方案
2014/03/01 职场文书
旅行社各个岗位职责
2014/03/15 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
大学毕业生个人总结
2015/02/28 职场文书
讲文明倡议书
2015/04/29 职场文书