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 相关文章推荐
用脚本调用样式的几种方法
Dec 09 Javascript
javascript CSS画图之基础篇
Jul 29 Javascript
基于JavaScript实现动态添加删除表格的行
Feb 01 Javascript
使用vue.js开发时一些注意事项
Apr 27 Javascript
浅谈EasyUI常用控件的禁用方法
Nov 09 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
Nov 16 Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 Javascript
vue计算属性时v-for处理数组时遇到的一个bug问题
Jan 21 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
Dec 03 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
JS eval代码快速解密实例解析
Apr 23 Javascript
VUE Elemen-ui之穿梭框使用方法详解
Jan 19 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
一个很方便的 XML 类!!原创的噢
2006/10/09 PHP
php adodb介绍
2009/03/19 PHP
Yii2.0中的COOKIE和SESSION用法
2016/08/12 PHP
javascript实现的鼠标链接提示效果生成器代码
2007/06/28 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
js确定对象类型方法
2012/03/30 Javascript
javascript实现简单的鼠标拖动效果实例
2015/04/10 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
在javaScript中检测数据类型的几种方式小结
2017/03/04 Javascript
jQuery ajax实现省市县三级联动
2021/03/07 Javascript
JS查找数组中重复元素的方法详解
2017/06/14 Javascript
Layui数据表格之获取表格中所有的数据方法
2018/08/20 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
最简单的JS实现json转csv的方法
2019/01/10 Javascript
微信小程序实现的canvas合成图片功能示例
2019/05/03 Javascript
解决LayUI数据表格复选框不居中显示的问题
2019/09/25 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
django通过ajax发起请求返回JSON格式数据的方法
2015/06/04 Python
Python实现的彩票机选器实例
2015/06/17 Python
简单介绍使用Python解析并修改XML文档的方法
2015/10/15 Python
Python装饰器入门学习教程(九步学习)
2016/01/28 Python
Python线程之定位与销毁的实现
2019/02/17 Python
Scrapy框架爬取西刺代理网免费高匿代理的实现代码
2019/02/22 Python
使用python实现时间序列白噪声检验方式
2020/06/03 Python
Python logging模块handlers用法详解
2020/08/14 Python
通过实例解析python subprocess模块原理及用法
2020/10/10 Python
python 实现的IP 存活扫描脚本
2020/12/10 Python
html+css实现自定义图片上传按钮功能
2019/09/04 HTML / CSS
工程管理造价应届生求职信
2013/11/13 职场文书
《在家里》教后反思
2014/03/01 职场文书
质量整改通知单
2015/04/21 职场文书
通知函格式范文
2015/04/27 职场文书
2019餐饮行业创业计划书!
2019/06/27 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang