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 相关文章推荐
javascript 兼容FF的onmouseenter和onmouseleave的代码
Jul 19 Javascript
经典海量jQuery插件 大家可以收藏一下
Feb 07 Javascript
fancybox modal的完美解决(右上的X)
Oct 30 Javascript
javascript中的void运算符语法及使用介绍
Mar 10 Javascript
各种常用的JS函数整理
Oct 25 Javascript
分享js粘帖屏幕截图到web页面插件screenshot-paste
Aug 21 Javascript
jQuery+CSS3实现四种应用广泛的导航条制作实例详解
Sep 17 Javascript
基于jQuery实现Accordion手风琴自定义插件
Oct 13 Javascript
详解webpack自动生成html页面
Jun 29 Javascript
JS函数进阶之继承用法实例分析
Jan 15 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
利用node.js开发cli的完整步骤
Dec 29 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的历史和优缺点
2006/10/09 PHP
PHP FTP操作类代码( 上传、拷贝、移动、删除文件/创建目录)
2014/05/10 PHP
使用symfony命令创建项目的方法
2016/03/17 PHP
Laravel框架实现利用中间件进行操作日志记录功能
2018/06/06 PHP
java解析json方法总结
2019/05/16 PHP
显示js对象所有属性和方法的函数
2009/10/16 Javascript
仿中关村在线首页弹出式广告插件(jQuery版)
2012/05/03 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
Javascript玩转继承(三)
2014/05/08 Javascript
14款NodeJS Web框架推荐
2014/07/11 NodeJs
详解AngularJS验证、过滤器、指令
2017/01/04 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
JS原生数据双向绑定实现代码
2017/08/14 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
Vue2.0系列之过滤器的使用
2018/03/01 Javascript
JavaScript实现拖拽功能
2020/02/11 Javascript
[40:48]DOTA2上海特级锦标赛D组败者赛 Liquid VS COL第二局
2016/02/28 DOTA
用Python的pandas框架操作Excel文件中的数据教程
2015/03/31 Python
python中异常报错处理方法汇总
2016/11/20 Python
详解Python中表达式i += x与i = i + x是否等价
2017/02/08 Python
python 中的int()函数怎么用
2017/10/17 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
ubuntu环境下python虚拟环境的安装过程
2018/01/07 Python
wxPython的安装与使用教程
2018/08/31 Python
如何利用Anaconda配置简单的Python环境
2019/06/24 Python
python selenium实现发送带附件的邮件代码实例
2019/12/10 Python
Keras loss函数剖析
2020/07/06 Python
Pycharm学生免费专业版安装教程的方法步骤
2020/09/24 Python
用60行代码实现Python自动抢微信红包
2021/02/04 Python
Baby Tulai澳大利亚:美国婴儿背带品牌
2018/10/15 全球购物
诚信考试承诺书
2014/03/27 职场文书
抽奖活动主持词
2014/03/31 职场文书
大学生求职信怎么写
2015/03/19 职场文书
书法社团活动总结
2015/05/07 职场文书
2016银行求职自荐信
2016/01/28 职场文书
python实现网络五子棋
2021/04/11 Python