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 相关文章推荐
javascript动画之圆形运动,环绕鼠标运动作小球
Jul 20 Javascript
字符串的replace方法应用浅析
Dec 06 Javascript
根据邮箱的域名跳转到相应的登录页面的代码
Feb 27 Javascript
jquery入门—编写一个导航条(可伸缩)
Jan 07 Javascript
js 获取屏幕各种宽高的方法(浏览器兼容)
May 15 Javascript
jquery.qrcode在线生成二维码使用示例
Aug 21 Javascript
javascript自定义的addClass()方法
May 28 Javascript
jQuery中Ajax的get、post等方法详解
Jan 20 Javascript
js根据手机客户端浏览器类型,判断跳转官网/手机网站多个实例代码
Apr 30 Javascript
微信小程序实现拖拽 image 触摸事件监听的实例
Aug 17 Javascript
node学习笔记之读写文件与开启第一个web服务器操作示例
May 29 Javascript
使用JavaScript计算前一天和后一天的思路详解
Dec 20 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环境套包 dedeampz 伪静态设置示例
2014/03/26 PHP
php中switch语句用法详解
2015/08/17 PHP
是 WordPress 让 PHP 更流行了 而不是框架
2016/02/03 PHP
Laravel基础-关于引入公共文件的两种方式
2019/10/18 PHP
Laravel框架之解决前端显示图片问题
2019/10/24 PHP
TFDN图片播放器 不错自动播放
2006/10/03 Javascript
javascript 字符 Escape,encodeURI,encodeURIComponent
2009/07/09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(一)让静态人物动起来
2013/01/23 Javascript
javascript中负数算术右移、逻辑右移的奥秘探索
2013/10/17 Javascript
jquery iframe操作详细解析
2013/11/20 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
Bootstrap树形控件使用方法详解
2016/01/27 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JS实现动态添加DOM节点和事件的方法示例
2017/04/28 Javascript
详解用webpack把我们的业务模块分开打包的方法
2017/07/20 Javascript
详解使用React制作一个模态框
2019/03/14 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
2020/12/15 Vue.js
Vue 修改网站图标的方法
2020/12/31 Vue.js
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
python 去除二维数组/二维列表中的重复行方法
2019/01/23 Python
python中自带的三个装饰器的实现
2019/11/08 Python
python3读取csv文件任意行列代码实例
2020/01/13 Python
Python urllib.request对象案例解析
2020/05/11 Python
CSS3 Media Queries详细介绍和使用实例
2014/05/08 HTML / CSS
CSS3实现菜单悬停效果
2020/11/17 HTML / CSS
旅游管理实习自我鉴定
2013/09/29 职场文书
专业实习自我鉴定
2013/10/29 职场文书
中学生爱国演讲稿
2013/12/31 职场文书
教育英语专业毕业生的求职信
2014/03/13 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
2014年信贷员工作总结
2014/11/18 职场文书
二年级上册数学教学计划
2015/01/20 职场文书
2015年保送生自荐信
2015/03/24 职场文书
导游词之神仙居景区
2019/11/15 职场文书