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脚本实现Web页面信息交互
Dec 21 Javascript
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
js 数组操作之pop,push,unshift,splice,shift
Jan 29 Javascript
javascript 广告移动特效的实现代码
Jun 25 Javascript
AngularJS基础 ng-submit 指令简单示例
Aug 03 Javascript
jquery实现全选、不选、反选的两种方法
Sep 06 Javascript
Angular 理解module和injector,即依赖注入
Sep 07 Javascript
微信小程序之前台循环数据绑定
Aug 18 Javascript
ES6中新增的Object.assign()方法详解
Sep 22 Javascript
vue实现form表单与table表格的数据关联功能示例
Jan 29 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
vue-router跳转时打开新页面的两种方法
Jul 29 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
PHP5 的对象赋值机制介绍
2011/08/02 PHP
PHP 中检查或过滤IP地址的实现代码
2011/11/27 PHP
php过滤XSS攻击的函数
2013/11/12 PHP
PHP 微信支付类 demo
2015/11/30 PHP
PHP版单点登陆实现方案的实例
2016/11/17 PHP
php中类和对象:静态属性、静态方法
2017/04/09 PHP
实例介绍PHP删除数组中的重复元素
2019/03/03 PHP
Jquery 高亮显示文本中重要的关键字
2009/12/24 Javascript
JavaScript中清空数组的三种方法分享
2011/04/07 Javascript
Javascript中的window.event.keyCode使用介绍
2011/04/26 Javascript
判断JS对象是否拥有某种属性的两种方式
2013/12/02 Javascript
php的文件上传入门教程(实例讲解)
2014/04/10 Javascript
浅谈angular.js中实现双向绑定的方法$watch $digest $apply
2015/10/14 Javascript
Nodejs Express4.x开发框架随手笔记
2015/11/23 NodeJs
Jquery获取radio选中的值
2017/05/05 jQuery
利用Javascript获取选择文本所在的句子详解
2017/12/03 Javascript
Postman的下载及安装教程详解
2018/10/16 Javascript
Vuex的基本概念、项目搭建以及入坑点
2018/11/04 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
微信小程序实现电子签名并导出图片
2020/05/27 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
vue中使用腾讯云Im的示例
2020/10/23 Javascript
[01:52]PWL S2开团时刻第四期——DOTA2成语故事
2020/12/03 DOTA
python的json中方法及jsonpath模块用法分析
2019/12/06 Python
keras tensorflow 实现在python下多进程运行
2020/02/06 Python
python3 deque 双向队列创建与使用方法分析
2020/03/24 Python
keras实现VGG16 CIFAR10数据集方式
2020/07/07 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
How TDD works
2012/09/30 面试题
护理专业本科生自荐信
2013/10/01 职场文书
司机岗位职责说明书
2014/07/29 职场文书
无子女夫妻离婚协议书(4篇)
2014/10/20 职场文书
计算机实训报告范文
2014/11/05 职场文书
纯CSS实现hover图片pop-out弹出效果的实例代码
2021/04/16 HTML / CSS
提取视频中的音频 Python只需要三行代码!
2021/05/10 Python
PyQt5实现多张图片显示并滚动
2021/06/11 Python