jquery实现点击页面计算点击次数

代码很简单，这里就不多废话了，直接奉上：

代码如下:

$(function(){
      var w=0,tip=$("<b>");
      tip.css({
   "z-index":99999,position:"absolute",color:"red",display:"none"
              }),
      $("body").append(tip),//页面创建b标签用来显示数字
      $(document).on("click",function(e){
            var x=e.pageX,y=e.pageY;//获取点击页面坐标
            tip.text("+"+ ++w).css({//数字加1
              display:"block",top:y-15,left:x,opacity:1//定位显示
            }).stop(!0,!1).animate({//stop(stopAll,goToEnd),如果发生多次点击时，要停止上一个动画的执行
                              top:y-180,opacity:0},800,function(){
                                        tip.hide()
                                    }),
            e.stopPropagation()
      });
});

代码就到这里了，希望小伙伴们喜欢。

赞 (0)

相关推荐

  • js计算页面刷新的次数

    复制代码 代码如下: <script language="javascript"> function window.onload() { if(window.name==""){ window.name = "0"; } else{ window.name = eval(window.name) + 1; alert("已经刷新"+ window.name+'次'); } } </script>

  • js判断某个字符出现的次数的简单实例

    js判断某个字符出现的次数的简单实例 function patch(re,s){ //参数1正则式,参数2字符串 re=eval_r("/"+re+"/ig"); //不区分大小写,如须则去掉i,改为 re=eval_r("/"+re+"/g") var len = s.match(re).length; return len; } var str="Hello World"; alert("nu

  • js记录点击某个按钮的次数-刷新次数为初始状态的实例

    实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="

  • jquery实现点击页面计算点击次数

    代码很简单,这里就不多废话了,直接奉上: 复制代码 代码如下: $(function(){       var w=0,tip=$("<b>");       tip.css({    "z-index":99999,position:"absolute",color:"red",display:"none"               }),       $("body")

  • jquery点击页面任何区域实现鼠标焦点十字效果

    jquery点击页面任何区域实现鼠标焦点十字效果

    系统开发时很多地方需要有焦点效果,例如:鼠标点击聚焦,地图定位,在图片上突出显示,焦点定位页面元素. 本小功能通过jquery和graphics二次开发,实现通过鼠标点击页面任何区域,聚焦当前点击位置.适用于页面任何元素的位置效果. 首先引入jquery引擎包:jquery-1.4.2.min.js和graphics.js 源码下载地址 编写实现效果js文件,qfocus.js,源码如下: 复制代码 代码如下: var qfocus = { config:{ "bar_dis":tru

  • 由点击页面其它地方隐藏div所想到的jQuery的delegate

    由点击页面其它地方隐藏div所想到的jQuery的delegate

    先从最简单的开始,假如页面有一个id为test的div,我们要实现点击页面其它地方隐藏该div: 复制代码 代码如下: <div id="test" style="margin:100px;background-color:#3e3;width:100px;height:100px;"> </div> 对于这个问题一般有两种思路,这两种思路都会利用事件冒泡这一原理,想要详细了解Javascript事件机制可以看看JavaScript与HTML

  • jQuery点击页面其他部分隐藏下拉菜单功能

    一.开发小要点 web页面中,我们一般不用select.option来实现下拉菜单效果,因为下拉框的样式丑且难以美化,所以我们选择控制ul显示隐藏来实现同样且高大上的效果,但是不能像下拉框那样点击页面其他部分,下拉菜单收起或隐藏,该怎么办呢?只能用js这老大哥来控制了. 二.代码 HTML: <div class="select_box" id="selected"> <div class="select"> <sp

  • jQuery中iframe的操作(点击按钮新增窗口)

    jQuery中iframe的操作(点击按钮新增窗口)

    <iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分. 今天遇到一个问题:怎样实现点击一个按钮,在当前的页面上新增加一个小窗口,展示一个图片信息? 如下图所示: 点击之前: 单击之后: 分析:要使新增的小窗口不影响父页面,我们这里采用iframe的框架的技术. [<iframe>也应该是框架的一种形式,它与<frame>不同的是,iframe可以嵌在网页中的任意部分.] 实现是思路:(1)在按钮的上添加一个

  • Jquery全选与反选点击执行一次的解决方案

    Jquery全选与反选点击执行一次的解决方案

    代码需求, 使用attr只能执行一次,使用prop则完美实现全选和反选,获取所有选中的项并把选中项的文本组成一个字符串. 解决方案一: 代码如下: <html> <head> <script src="jquery-1.11.1.min.js" type="text/javascript"></script> </head> <body> <input type="checkbo

  • jQuery基于事件控制实现点击显示内容下拉效果

    jQuery基于事件控制实现点击显示内容下拉效果

    本文实例讲述了jQuery基于事件控制实现点击显示内容下拉效果.分享给大家供大家参考,具体如下: 1.实例代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&

  • js点击页面其它地方将某个显示的DIV隐藏

    实现也很简单,但需要注意的是,在点击显示的事件中,需要做阻止事件冒泡的处理,否则就触发页面的点击事件了.但这样做也有一个缺点,即如果同一个页面中如果也有事件阻止冒泡,则不能隐藏DIV,所以在这样的事件中需要特殊处理下:自己调用隐藏下DIV(但正常来说这样的事件并不多): JS: 复制代码 代码如下: $(document).ready(function() { //语言头部的点击事件,显示语言列表 $(".language_selected").click(function(e) {

  • 如何解决手机浏览器页面点击不跳转浏览器双击放大网页

    手机端web网页项目 1,angluar js 1.4.6 网页项目开发过程中,使用PC浏览器能正常访问,IOS设备浏览器也能正常访问,但是使用Android部分浏览器进行访问的时候,链接偶尔不跳转,点击完没有任何反应(本人使用angluar js route进行单页面应用跳转),此时地址栏的路径已经被更新为点击后的地址,并且双击页面网页会放大(顺着这个现象去找到了问题) 现在的手机或平板电脑等移动设备上的浏览器默认都有双击放大的设置,怎么让双击不放大? 解决方案: 可以在页面头部加上meta

随机推荐