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 相关文章推荐
学习YUI.Ext基础第一天
Mar 10 Javascript
js弹窗代码 可以指定弹出间隔
Jul 03 Javascript
JavaScript移除数组元素减少长度的方法
Sep 05 Javascript
Javascript学习笔记之 对象篇(一) : 对象的使用和属性
Jun 24 Javascript
JavaScript获取当前日期是星期几的方法
Apr 06 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
JS简单测试循环运行时间的方法
Sep 04 Javascript
AngularJS指令中的绑定策略实例分析
Dec 14 Javascript
Angular2搜索和重置按钮过场动画
May 24 Javascript
JavaScript重复元素处理方法分析【统计个数、计算、去重复等】
Dec 14 Javascript
jsonp实现百度下拉框功能的方法分析
May 10 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 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中使用preg_match_all匹配文章中的图片
2013/02/06 PHP
php调用mysql存储过程实例分析
2014/12/29 PHP
分享常见的几种页面静态化的方法
2015/01/08 PHP
smarty内置函数config_load用法实例
2015/01/22 PHP
Nginx环境下PHP flush失效的解决方法
2016/10/19 PHP
jquery实现类似淘宝星星评分功能实例
2014/09/12 Javascript
jQuery实现带滑动条的菜单效果代码
2015/08/26 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
2015/10/15 Javascript
js行号显示的文本框实现效果(兼容多种浏览器 )
2015/10/23 Javascript
javascript 数组的定义和数组的长度
2016/06/07 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
2016/10/14 Javascript
浅谈js函数的多种定义方法与区别
2016/11/29 Javascript
Vue概念及常见命令介绍(1)
2016/12/08 Javascript
简单易懂的天气插件(代码分享)
2017/02/04 Javascript
AngularJS常见过滤器用法实例总结
2017/07/06 Javascript
nodejs结合Socket.IO实现的即时通讯功能详解
2018/01/12 NodeJs
微信小程序实现城市列表选择
2018/06/05 Javascript
深入理解JavaScript 中的执行上下文和执行栈
2018/10/23 Javascript
用Cordova打包Vue项目的方法步骤
2019/02/02 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
JS出现404错误原理及解决方案
2020/07/01 Javascript
vue 子组件修改data或调用操作
2020/08/07 Javascript
[01:19]DOTA2城市挑战赛报名开始 开启你的城市传奇
2018/03/23 DOTA
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
python中退出多层循环的方法
2018/11/27 Python
ipython和python区别详解
2019/06/26 Python
python3实现二叉树的遍历与递归算法解析(小结)
2019/07/03 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
CSS3 分类菜单效果
2019/05/27 HTML / CSS
四方通行旅游网:台湾订房、出国旅游
2017/09/20 全球购物
学生干部学习的自我评价
2014/02/18 职场文书
人力管理专业毕业生求职信
2014/02/27 职场文书
表扬稿范文
2015/01/17 职场文书
爱的教育读书笔记
2015/06/26 职场文书
一篇文章弄懂Python关键字、标识符和变量
2021/07/15 Python
CSS实现背景图片全屏铺满自适应的3种方式
2022/07/07 HTML / CSS