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中void(0)的具体含义解释
Aug 02 Javascript
仿微博字符限制效果实现代码
Apr 20 Javascript
node.js开发中使用Node Supervisor实现监测文件修改并自动重启应用
Nov 04 Javascript
javascript三种代码注释方法
Jun 02 Javascript
javascript 小数乘法结果错误的处理方法
Jul 28 Javascript
Javascript中Promise的四种常用方法总结
Jul 14 Javascript
使用原生js+canvas实现模拟心电图的实例
Sep 20 Javascript
vue.js整合mint-ui里的轮播图实例代码
Dec 27 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
Jun 04 Javascript
vue发送websocket请求和http post请求的实例代码
Jul 11 Javascript
微信小程序图片左右摆动效果详解
Jul 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截取汉字乱码问题解决方法mb_substr函数的应用
2008/03/30 PHP
apache2.2.4+mysql5.0.77+php5.2.8安装精简
2009/04/29 PHP
Php中文件下载功能实现超详细流程分析
2012/06/13 PHP
PHP 常用数组内部函数(Array Functions)介绍
2013/06/05 PHP
简单谈谈php浮点数精确运算
2016/03/10 PHP
jQuery删除节点的三个方法即remove()detach()和empty()
2013/12/27 Javascript
js控制再次点击按钮之间的间隔时间可防止重复提交
2014/08/01 Javascript
js改变embed标签src值的方法
2015/04/10 Javascript
全面解析Bootstrap手风琴效果
2020/04/17 Javascript
JS中的forEach、$.each、map方法推荐
2016/04/05 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
2016/08/15 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
JavaScript复制内容到剪贴板的两种常用方法
2018/02/27 Javascript
Vue源码中要const _toStr = Object.prototype.toString的原因分析
2018/12/09 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
js尾调用优化的实现
2019/05/23 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
解析Python中的生成器及其与迭代器的差异
2016/06/20 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
浅谈ROC曲线的最佳阈值如何选取
2020/02/28 Python
Django调用百度AI接口实现人脸注册登录代码实例
2020/04/23 Python
python实现代码审查自动回复消息
2021/02/01 Python
Python爬虫制作翻译程序的示例代码
2021/02/22 Python
加拿大女鞋品牌:ALDO
2016/11/13 全球购物
香港永安旅游网:Wing On Travel
2017/04/10 全球购物
大学生毕业自我评价范文分享
2013/11/11 职场文书
《傅雷家书》教学反思
2014/04/20 职场文书
2014年小学体育工作总结
2014/12/11 职场文书
学生检讨书范文
2015/01/27 职场文书
关于空气污染危害的感想
2015/08/11 职场文书
小学语文教学反思范文
2016/03/03 职场文书
详解Redis基本命令与使用场景
2021/06/01 Redis
SpringBoot+Vue+JWT的前后端分离登录认证详细步骤
2021/09/25 Java/Android