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 URL编码和解码使用说明
Apr 12 Javascript
js用闭包遍历树状数组的方法
Mar 19 Javascript
JQuery中$(document)是什么意思有什么作用
Jul 21 Javascript
javascript操作ul中li的方法
May 14 Javascript
Jquery实现弹性滑块滑动选择数值插件
Aug 08 Javascript
基于jquery实现放大镜效果
Aug 17 Javascript
JS 中document.write()的用法和清空的原因浅析
Dec 04 Javascript
JQuery选中select组件被选中的值方法
Mar 08 jQuery
React Native中Mobx的使用方法详解
Dec 04 Javascript
fastadmin中调用js的方法
May 14 Javascript
js实现适配移动端的拖动效果
Jan 13 Javascript
浅谈React中组件逻辑复用的那些事儿
May 21 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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
PHP实现在线阅读PDF文件的方法
2015/06/23 PHP
jquery+php实现导出datatables插件数据到excel的方法
2015/07/06 PHP
CI框架文件上传类及图像处理类用法分析
2016/05/18 PHP
浅谈关于PHP解决图片无损压缩的问题
2017/09/01 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
xml 与javascript结合的问题解决方法
2007/03/24 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
JavaScript中的slice()方法使用详解
2015/06/06 Javascript
对JavaScript客户端应用编程的一些建议
2015/06/24 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
微信小程序 仿猫眼实现实例代码
2017/03/14 Javascript
JavaScript实现body内任意节点的自定义属性功能示例
2017/09/18 Javascript
angular 服务随记小结
2019/05/06 Javascript
微信小程序文字显示换行问题
2019/07/28 Javascript
微信小程序swiper使用网络图片不显示问题解决
2019/12/13 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
九步学会Python装饰器
2015/05/09 Python
python 用正则表达式筛选文本信息的实例
2018/06/05 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
python高级特性和高阶函数及使用详解
2018/10/17 Python
python 下 CMake 安装配置 OPENCV 4.1.1的方法
2019/09/30 Python
python对Excel按条件进行内容补充(推荐)
2019/11/24 Python
Python使用扩展库pywin32实现批量文档打印实例
2020/04/09 Python
利用python爬取有道词典的方法
2020/12/08 Python
探究 canvas 绘图中撤销(undo)功能的实现方式详解
2018/05/17 HTML / CSS
欧洲最大的预定车位市场:JustPark
2020/01/06 全球购物
LACOSTE波兰官网:Polo衫、服装和鞋类
2020/09/29 全球购物
化学学院毕业生自荐信范文
2013/12/17 职场文书
一月红领巾广播稿
2014/02/11 职场文书
高中毕业典礼演讲稿
2014/09/09 职场文书
学习三严三实对照检查材料思想汇报
2014/09/22 职场文书
环保证明
2015/06/23 职场文书
欠条范文
2015/07/03 职场文书
会议简报格式范文
2015/07/20 职场文书