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 相关文章推荐
zShowBox 图片放大展示jquery版 兼容性
Sep 24 Javascript
jquery实现的V字形显示效果代码
Oct 27 Javascript
jQuery on()绑定动态元素出现的问题小结
Feb 19 Javascript
聊一聊JS中this的指向问题
Jun 17 Javascript
Webpack打包慢问题的完美解决方法
Mar 16 Javascript
JS简单实现获取元素的封装操作示例
Apr 07 Javascript
js 图片转base64的方式(两种)
Apr 24 Javascript
Javascript 实现 Excel 导入生成图表功能
Oct 22 Javascript
使用electron实现百度网盘悬浮窗口功能的示例代码
Oct 24 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
JavaScript switch语句使用方法简介
Dec 30 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+Javascript实现在线拍照功能实例
2015/07/18 PHP
简单解决微信文章图片防盗链问题
2016/12/17 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
jquery select操作的日期联动实现代码
2009/12/06 Javascript
用jQuery扩展自写的 UI导航
2010/01/13 Javascript
jquery 新手学习常见问题解决方法
2010/04/18 Javascript
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
javascript之querySelector和querySelectorAll使用介绍
2011/12/20 Javascript
JQuery控制div外点击隐藏而div内点击不会隐藏的方法
2015/01/13 Javascript
深入理解JavaScript系列(47):对象创建模式(上篇)
2015/03/04 Javascript
详解angularjs popup-table 弹出框表格指令
2017/09/20 Javascript
Angular实现点击按钮控制隐藏和显示功能示例
2017/12/29 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
微信jssdk逻辑在vue中的运用详解
2018/11/14 Javascript
vue-router结合vuex实现用户权限控制功能
2019/11/14 Javascript
JS实现轮播图效果
2020/01/11 Javascript
Python面向对象之类和对象实例详解
2018/12/10 Python
python实现列表的排序方法分享
2019/07/01 Python
python PIL/cv2/base64相互转换实例
2020/01/09 Python
Django admin 实现search_fields精确查询实例
2020/03/30 Python
用Python自动清理系统垃圾的实现
2021/01/18 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
巴西最大的家电和百货零售商:Casas Bahia
2016/11/22 全球购物
法国发饰品牌:Alexandre De Paris
2018/12/04 全球购物
物业电工岗位职责
2013/11/20 职场文书
六十大寿答谢词
2014/01/12 职场文书
交通事故赔偿协议书范本
2014/04/15 职场文书
学生吸烟检讨书
2014/09/14 职场文书
临时工聘用合同协议书
2014/10/29 职场文书
2014年英语工作总结
2014/12/20 职场文书
大学考试作弊检讨书
2015/05/06 职场文书
Python图片处理之图片裁剪教程
2021/05/27 Python
Java 泛型详解(超详细的java泛型方法解析)
2021/07/02 Java/Android
CSS精灵图的原理与使用方法介绍
2022/03/17 HTML / CSS
漫画「处刑少女的生存之道」第3卷封面公开
2022/03/21 日漫
python神经网络ResNet50模型
2022/05/06 Python