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 相关文章推荐
JQuery跨Iframe选择实现代码
Aug 19 Javascript
javascript getElementsByTagName
Jan 31 Javascript
js有关元素内容操作小结
Dec 20 Javascript
js比较和逻辑运算符的介绍
Mar 10 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
Nov 25 Javascript
如何实现修改密码时密码框显示保存到cookie的密码
Dec 10 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
Jan 27 Javascript
React Native实现简单的登录功能(推荐)
Sep 19 Javascript
关于express与koa的使用对比详解
Jan 25 Javascript
基于JavaScript实现幸运抽奖页面
Jul 05 Javascript
微信小程序实现同时上传多张图片
Feb 03 Javascript
JS 4个超级实用的小技巧 提升开发效率
Oct 05 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设计模式中单例模式的应用分析
2013/05/15 PHP
php生成静态页面的简单示例
2014/04/17 PHP
Laravel 5框架学习之子视图和表单复用
2015/04/09 PHP
PHP中JSON的应用技巧
2015/10/10 PHP
php如何连接sql server
2015/10/16 PHP
zend framework重定向方法小结
2016/05/28 PHP
PHP基于mssql扩展远程连接MSSQL的简单实现方法
2016/10/08 PHP
php简单随机字符串生成方法示例
2017/04/19 PHP
jQuery 网易相册鼠标移动显示隐藏效果实现代码
2013/03/31 Javascript
了解了这些才能开始发挥jQuery的威力
2013/10/10 Javascript
上传图片js判断图片尺寸和格式兼容IE
2014/09/01 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
2015/06/30 Javascript
JS实现网站菜单拖拽移位效果的方法
2015/09/24 Javascript
JavaScript中闭包之浅析解读(必看篇)
2016/08/25 Javascript
ES6中Array.includes()函数的用法
2017/09/20 Javascript
js插件实现图片滑动验证码
2020/09/29 Javascript
深入浅析Vue.js中 computed和methods不同机制
2018/03/22 Javascript
用react-redux实现react组件之间数据共享的方法
2018/06/08 Javascript
JS获取月的第几周和年的第几周实例代码
2018/12/05 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
vue-cli 3 全局过滤器的实例代码详解
2019/06/03 Javascript
JS实现长图上下滚动效果
2020/03/19 Javascript
Python实现Windows上气泡提醒效果的方法
2015/06/03 Python
Python中基本的日期时间处理的学习教程
2015/10/16 Python
python中获得当前目录和上级目录的实现方法
2017/10/12 Python
使用python和pygame绘制繁花曲线的方法
2018/02/24 Python
对python csv模块配置分隔符和引用符详解
2018/12/12 Python
New Balance波兰官方商城:始于1906年,百年慢跑品牌
2017/08/15 全球购物
SQL数据库笔试题
2016/03/08 面试题
物业保安员岗位职责
2014/03/14 职场文书
幼儿园安全责任书范本
2014/07/24 职场文书
刑事和解协议书范本
2014/11/19 职场文书
个人年终总结怎么写
2015/03/09 职场文书
管理失职检讨书
2015/05/05 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
小学数学教学反思范文
2016/02/16 职场文书