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 相关文章推荐
javascript学习网址备忘
May 29 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
推荐40个非常优秀的jQuery插件和教程【系列三】
Nov 09 Javascript
实现web打印的各种方法介绍及实现代码
Jan 09 Javascript
js实现简单的星级选择器提交效果适用于评论等
Oct 18 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
Spring mvc 接收json对象
Dec 10 Javascript
深入理解JavaScript内置函数
Jun 03 Javascript
JavaScript中获取HTML元素值的三种方法
Jun 20 Javascript
jQuery实现字符串全部替换的方法
Dec 12 Javascript
基于VUE的v-charts的曲线显示功能
Oct 01 Javascript
JS如何实现基于websocket的多端桥接平台
May 14 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
Discuz 5.0 中读取纯真IP数据库函数分析
2007/03/16 PHP
php ignore_user_abort与register_shutdown_function 使用方法
2009/06/14 PHP
分享下页面关键字抓取www.icbase.com站点代码(带asp.net参数的)
2014/01/30 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
Yii2增删改查之查询 where参数详细介绍
2016/08/08 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
如何让动态插入的javascript脚本代码跑起来。
2007/01/09 Javascript
为Extjs加加速(javascript加速)
2010/08/19 Javascript
javascript温习的一些笔记 基础常用知识小结
2011/06/22 Javascript
javascript客户端遍历控件与获取父容器对象示例代码
2014/01/06 Javascript
jquery 实现两级导航菜单附效果图
2014/03/07 Javascript
浅谈JavaScript中null和undefined
2015/07/09 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
javaScript事件学习小结(四)event的公共成员(属性和方法)
2016/06/09 Javascript
AngularJS服务service用法总结
2016/12/13 Javascript
JS 中LocalStorage和SessionStorage的使用
2017/08/17 Javascript
jQuery实现的简单无刷新评论功能示例
2017/11/08 jQuery
echarts学习笔记之箱线图的分析与绘制详解
2017/11/22 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
聊聊vue 中的v-on参数问题
2021/01/29 Vue.js
用Python脚本生成Android SALT扰码的方法
2013/09/18 Python
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
Flask框架URL管理操作示例【基于@app.route】
2018/07/23 Python
python针对不定分隔符切割提取字符串的方法
2018/10/26 Python
Django数据库连接丢失问题的解决方法
2018/12/29 Python
Python实现Word表格转成Excel表格的示例代码
2020/04/16 Python
python实现猜单词游戏
2020/05/22 Python
Python3中的tuple函数知识点讲解
2021/01/03 Python
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
在Ajax应用中信息是如何在浏览器和服务器之间传递的
2016/05/31 面试题
女大学生个人求职信
2013/12/09 职场文书
擅自离岗检讨书
2014/09/12 职场文书
刘公岛导游词
2015/02/05 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
Java框架入门之简单介绍SpringBoot框架
2021/06/18 Java/Android