js实现简单点赞操作


Posted in Javascript onMarch 17, 2020

JavaScript实现点赞操作:(练手·初级),供大家参考,具体内容如下

前期准备:

① 导入jQuery文件;

② 导入bootstrap文件;

③ 点赞图片;

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>对span标签控制鼠标点击</title>
    <script type="text/javascript" src="js/jquery-3.3.1.js" ></script>
    <script type="text/javascript" src="js/bootstrap.min.js" ></script>
  </head>
  <body>
    <h5 style="font-family: '微软雅黑';">图片文字并排摆放,文字局域图片腰部</h5>
    <!--<span style="font-family: '微软雅黑';color: orangered;font-size: 10px; ">注意:有些浏览器不支持旋转的特性transform:正如你所看到的<br/></span>-->
     
    <span id="goodSpan" onclick="sendGood()">
      <img src="img/good.jpg" style="width: 25px; height: 25px;" /> 
    </span>
    [<span id="good"></span>]
      
    <span id="badSpan" onclick="sendBad()">
      <img src="img/good.jpg" style="width: 25px; height: 25px; transform: rotate(180deg);" /> 
    </span>
    [<span id="bad"></span>]
     
    <script>
      /*点赞的数量:*/
      document.getElementById("good").innerText = "";
      var good = document.getElementById("good").textContent;
       
      document.getElementById("bad").innerText = "";
      var bad = document.getElementById("bad").textContent;
      window.onload = function(){
        if (good == "") {
          good = 0;
          document.getElementById("good").innerText = 0;
        }
        if (bad == "") {
          bad = 0;
          document.getElementById("bad").innerText = 0;
        }       
      }
       
      /*点赞的数量:*/
      function sendGood(){
        good = parseInt(good) + 1;
        document.getElementById("good").innerText = good;
         
        document.getElementById("goodSpan").onclick = function(e){
          e.preventDefault();
          e.stopImmediatePropagation();
        }
      }
       
       
      /*踩的数量:*/
      function sendBad(){
        bad = parseInt(bad) + 1;
        document.getElementById("bad").innerText = bad;
        document.getElementById("badSpan").onclick = function(e){
          e.preventDefault();
          e.stopImmediatePropagation();
        }
      }
    </script>
  </body>
</html>

结果如下:

js实现简单点赞操作

下面是点赞图片:可直接拖动图片另存为保存到本地,再使用。

js实现简单点赞操作

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

Javascript 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
javascript不同页面传值的改进版
Sep 30 Javascript
js事件冒泡实例分享(已测试)
Apr 23 Javascript
浅谈JS闭包中的循环绑定处理程序
Nov 09 Javascript
微信小程序 window_x64环境搭建
Sep 30 Javascript
Vue方法与事件处理器详解
Dec 01 Javascript
Vue响应式原理深入解析及注意事项
Dec 11 Javascript
vue按需加载实例详解
Sep 06 Javascript
ligerUI的ligerDialog关闭刷新的方法
Sep 27 Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 Javascript
js实现盒子移动动画效果
Aug 09 Javascript
uniapp 微信小程序 自定义tabBar 导航
Apr 22 Javascript
vue+ESLint 配置保存 自动格式化代码
Mar 17 #Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 #Javascript
JavaScript实现横版菜单栏
Mar 17 #Javascript
JavaScript实现留言板案例
Mar 17 #Javascript
es6函数之严格模式用法实例分析
Mar 17 #Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 #Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 #Javascript
You might like
PHP 输出简单动态WAP页面
2009/06/09 PHP
php连接Access数据库错误及解决方法
2013/06/20 PHP
php无限极分类实现方法分析
2019/07/04 PHP
PHP常见的序列化与反序列化操作实例分析
2019/10/28 PHP
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
Knockout visible绑定使用方法
2013/11/15 Javascript
Node.js抓取中文网页乱码问题和解决方法
2015/02/10 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
JS实现页面打印(整体、局部)
2017/08/18 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
2018/03/08 Javascript
详解Vue.js项目API、Router配置拆分实践
2018/03/16 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
echarts实现折线图的拖拽效果
2019/12/19 Javascript
JS中数组实现代码(倒序遍历数组,数组连接字符串)
2019/12/29 Javascript
原生javascript实现类似vue的数据绑定功能示例【观察者模式】
2020/02/24 Javascript
简单介绍Python的Django框架的dj-scaffold项目
2015/05/30 Python
使用httplib模块来制作Python下HTTP客户端的方法
2015/06/19 Python
Python实现的插入排序算法原理与用法实例分析
2017/11/22 Python
Python使用装饰器进行django开发实例代码
2018/02/06 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
解决Python 使用h5py加载文件,看不到keys()的问题
2019/02/08 Python
Django+Xadmin构建项目的方法步骤
2019/03/06 Python
Python 静态方法和类方法实例分析
2019/11/21 Python
Python使用uuid库生成唯一标识ID
2020/02/12 Python
Python中的流程控制详解
2021/02/18 Python
CSS3五个技巧给你的网站带来出色的效果
2009/04/02 HTML / CSS
英国第一蛋白粉品牌:Myprotein
2016/09/14 全球购物
美体小铺美国官网:The Body Shop美国
2017/11/10 全球购物
美国庭院家具购物网站:AlphaMarts
2019/04/10 全球购物
Juice Beauty官网:有机美容产品,护肤与化妆品
2020/06/13 全球购物
大四自我鉴定范文
2013/10/06 职场文书
就业意向书范文
2014/04/01 职场文书
室内趣味活动方案
2014/08/24 职场文书
高中学生会竞选演讲稿
2014/08/25 职场文书
2015年艾滋病宣传活动总结
2015/03/27 职场文书
工厂门卫岗位职责
2015/04/13 职场文书