javascript 判断用户有没有操作页面


Posted in Javascript onOctober 17, 2017

javascript 判断用户有没有操作页面

用js判断用户有没有操作页面,我们所要做的就是整理我们的思路。

一、思路

用户有没有操作界面,我们可以从页面在规定时间内有没有触发事件去考虑。比如用户有没有点击,有没有按键,有没有滚动鼠标滚轴。用户有没有移动鼠标等等。如果用户没有进行这些操作,那么我们可以大概的认为用户没有操作页面。我们可以给一个定时器。来记录在规定时间内用户有没有触发这些事件。我直接贴代码,代码的具体含义,我就不再讲解,思路大概就是这样。

二、代码演示

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js判断用户有没有操作页面</title>
</head>
<body>


<script>
 window.onload = function (){

   (function($){
     funObj = {
       timeUserFun:'timeUserFun',
     }
     $[funObj.timeUserFun] = function(time){
       var time = time || 2;
       var userTime = time*60;
       var objTime = {
         init:0,
         time:function(){
           objTime.init += 1;
           if(objTime.init == userTime){
             console.log(111) // 用户到达未操作事件 做一些处理
           }
         },
         eventFun:function(){
           clearInterval(testUser);
           objTime.init = 0;
           testUser = setInterval(objTime.time,1000);
         }
       }

       var testUser = setInterval(objTime.time,1000);

       var body = document.querySelector('html');
       body.addEventListener("click",objTime.eventFun);
       body.addEventListener("keydown",objTime.eventFun);
       body.addEventListener("mousemove",objTime.eventFun);
       body.addEventListener("mousewheel",objTime.eventFun);
     }
   })(window)


//   直接调用 参数代表分钟数,可以有一位小数;
    timeUserFun(0.1);
 }

</script>

</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js判断用户有没有操作页面</title>
</head>
<body>


<script>
 window.onload = function (){

   (function($){
     funObj = {
       timeUserFun:'timeUserFun',
     }
     $[funObj.timeUserFun] = function(time){
       var time = time || 2;
       var userTime = time*60;
       var objTime = {
         init:0,
         time:function(){
           objTime.init += 1;
           if(objTime.init == userTime){
             console.log(111) // 用户到达未操作事件 做一些处理
           }
         },
         eventFun:function(){
           clearInterval(testUser);
           objTime.init = 0;
           testUser = setInterval(objTime.time,1000);
         }
       }

       var testUser = setInterval(objTime.time,1000);

       var body = document.querySelector('html');
       body.addEventListener("click",objTime.eventFun);
       body.addEventListener("keydown",objTime.eventFun);
       body.addEventListener("mousemove",objTime.eventFun);
       body.addEventListener("mousewheel",objTime.eventFun);
     }
   })(window)


//   直接调用 参数代表分钟数,可以有一位小数;
    timeUserFun(0.1);
 }

</script>

</body>
</html>

如有疑问请留言或者到本站社区交流讨论,感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
Jquery 自定义动画概述及示例
Mar 29 Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 Javascript
js的alert弹出框出现乱码解决方案
Sep 02 Javascript
javascript使用数组的push方法完成快速排序
Sep 15 Javascript
JavaScript调用传递变量参数的相关问题及解决办法
Nov 01 Javascript
javascript基础知识分享之类与函数化
Feb 13 Javascript
JavaScript String 对象常用方法详解
May 13 Javascript
jquery实现刷新随机变化样式特效(tag标签样式)
Feb 03 Javascript
微信小程序实战之自定义模态弹窗(8)
Apr 18 Javascript
vue axios请求超时的正确处理方法
Apr 02 Javascript
AngularJS使用Filter自定义过滤器控制ng-repeat去除重复功能示例
Apr 21 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
vue-router 路由基础的详解
Oct 17 #Javascript
如何抽象一个Vue公共组件
Oct 17 #Javascript
vue实现图书管理demo详解
Oct 17 #Javascript
基于Vue实现图书管理功能
Oct 17 #Javascript
Vue.js简易安装和快速入门(第二课)
Oct 17 #Javascript
什么是Vue.js框架 为什么选择它?
Oct 17 #Javascript
node使用Koa2搭建web项目的方法
Oct 17 #Javascript
You might like
PHP filter_var() 函数 Filter 函数
2012/04/25 PHP
PHP中使用foreach()遍历二维数组的简单实例
2016/06/13 PHP
PDO操作MySQL的基础教程(推荐)
2017/08/18 PHP
Node.js生成HttpStatusCode辅助类发布到npm
2013/04/09 Javascript
javascript设计模式之解释器模式详解
2014/06/05 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
JS+CSS实现的简单折叠展开多级菜单效果
2015/09/12 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
javaScript实现滚动条事件详解
2020/03/24 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
vue.js模仿京东省市区三级联动的选择组件实例代码
2017/11/22 Javascript
浅谈在vue中用webpack打包之后运行文件的问题以及相关配置方法
2018/02/21 Javascript
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
vue使用Proxy实现双向绑定的方法示例
2019/03/20 Javascript
微信小程序左右滚动公告栏效果代码实例
2019/09/16 Javascript
JS async 函数的含义和用法实例总结
2020/04/08 Javascript
Vue用mixin合并重复代码的实现
2020/11/27 Vue.js
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
Python request设置HTTPS代理代码解析
2018/02/12 Python
Python设计模式之模板方法模式实例详解
2019/01/17 Python
python计算n的阶乘的方法代码
2019/10/25 Python
详解Django配置优化方法
2019/11/18 Python
Pandas时间序列:重采样及频率转换方式
2019/12/26 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
python为QT程序添加图标的方法详解
2020/03/09 Python
如何在Django中使用聚合的实现示例
2020/03/23 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python判断字符串是否为空和null方法实例
2020/04/26 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
纯HTML+CSS3制作导航菜单(附源码)
2013/04/24 HTML / CSS
移动端HTML5实现文件上传功能【附代码】
2016/03/25 HTML / CSS
会计实习自我鉴定
2013/12/04 职场文书
表彰大会策划方案
2014/05/13 职场文书
镇政府副镇长群众路线专题民主生活会对照检查材料
2014/09/19 职场文书
群众路线问题查摆对照检查材料
2014/10/04 职场文书
结婚保证书
2015/01/16 职场文书