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 相关文章推荐
复制本贴标题和地址的js代码
Jul 01 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
Javascript学习笔记之 函数篇(三) : 闭包和引用
Nov 23 Javascript
js打造数组转json函数
Jan 14 Javascript
jQuery蓝色风格滑动导航栏代码分享
Aug 19 Javascript
Bootstrap入门书籍之(四)菜单、按钮及导航
Feb 17 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
JS中Swiper的使用和轮播图效果
Aug 11 Javascript
JS遍历JSON数组及获取JSON数组长度操作示例【测试可用】
Dec 12 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 Javascript
解决vue单页面应用进入页面加载所有 js 的问题
Aug 12 Javascript
微信小程序实现简单的select下拉框
Nov 23 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
1982年日本摄影师镜头下的中国孩子 那无忧无虑的童年
2020/03/12 杂记
php实现大文件断点续传下载实例代码
2019/10/01 PHP
javascript 选择文件夹对话框(web)
2009/07/07 Javascript
javascript hashtable 修正版 下载
2010/12/30 Javascript
常见JS效果之图片减速度滚动实现代码
2011/12/08 Javascript
js的Boolean对象初始值示例
2014/03/04 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
js表单中选择框值的获取及表单的序列化
2015/12/17 Javascript
jquery实现具有收缩功能的垂直导航菜单
2016/02/16 Javascript
浅谈js和css内联外联注意事项
2016/06/30 Javascript
原生JS实现网络彩票投注效果
2016/09/25 Javascript
浅谈jQuery before和insertBefore的区别
2016/12/04 Javascript
AngularJS之ionic 框架下实现 Localstorage本地存储
2017/04/22 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
Vue 通过自定义指令回顾v-内置指令(小结)
2018/09/03 Javascript
Python之dict(或对象)与json之间的互相转化实例
2018/06/05 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
Pandas之MultiIndex对象的示例详解
2019/06/25 Python
如何用Python来理一理红楼梦里的那些关系
2019/08/14 Python
Python requests设置代理的方法步骤
2020/02/23 Python
六种酷炫Python运行进度条效果的实现代码
2020/07/17 Python
基于html5 canvas实现漫天飞雪效果实例
2014/09/10 HTML / CSS
html5组织内容_动力节点Java学院整理
2017/07/10 HTML / CSS
TUMI澳大利亚网站:美国旅行箱包品牌
2017/03/27 全球购物
应用化学专业本科生求职信
2013/09/29 职场文书
《大自然的语言》教学反思
2014/04/08 职场文书
竞聘上岗演讲
2014/05/19 职场文书
任命书格式
2014/06/05 职场文书
超市创意活动方案
2014/08/15 职场文书
党的群众路线教育实践活动党员个人剖析材料
2014/10/08 职场文书
迎新生欢迎词
2015/01/23 职场文书
教师个人教学总结
2015/02/11 职场文书
消防隐患整改通知书
2015/04/22 职场文书
《语言的突破》读后感3篇
2019/12/12 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python
vue+springboot实现登录验证码
2021/05/27 Vue.js