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 相关文章推荐
jquery showModelDialog的使用方法示例详解
Nov 19 Javascript
JavaScript省市联动实现代码
Feb 15 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
超漂亮的jQuery图片轮播特效
Nov 24 Javascript
利用jQuery实现WordPress中@的ID悬浮显示评论内容
Dec 11 Javascript
Javascript获取随机数的实现方法
Jun 22 Javascript
bootstrap导航条实现代码
Dec 28 Javascript
微信小程序 图片绝对定位(背景图片)
Apr 05 Javascript
简述jQuery Easyui一些用法
Aug 01 jQuery
Three.js加载外部模型的教程详解
Nov 10 Javascript
vue.js实现的绑定class操作示例
Jul 06 Javascript
layui对工具条进行选择性的显示方法
Sep 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
菜鸟学PHP之Smarty入门
2007/01/04 PHP
PHP正则表达式 /i, /is, /s, /isU等介绍
2014/10/23 PHP
php中mysql连接方式PDO使用详解
2015/02/25 PHP
Apache连接PHP后无法启动问题解决思路
2015/06/18 PHP
php事务回滚简单实现方法示例
2017/03/28 PHP
laravel 配置路由 api和web定义的路由的区别详解
2019/09/03 PHP
laravel 模型查询按照whereIn排序的示例
2019/10/16 PHP
浅谈javascript 归并方法
2015/01/21 Javascript
js实现对table动态添加、删除和更新的方法
2015/02/10 Javascript
Js和JQuery获取鼠标指针坐标的实现代码分享
2015/05/25 Javascript
Node.js连接postgreSQL并进行数据操作
2016/12/18 Javascript
Bootstrap面板使用方法
2017/01/16 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
微信小程序 本地图片按照屏幕尺寸处理
2017/08/04 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
js和jquery判断数据类型的4种方法总结
2020/08/28 jQuery
移动端JS实现拖拽两种方法解析
2020/10/12 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[02:22]完美世界DOTA2联赛PWL S3 集锦第一期
2020/12/15 DOTA
深度定制Python的Flask框架开发环境的一些技巧总结
2016/07/12 Python
Flask解决跨域的问题示例代码
2018/02/12 Python
Python实现的线性回归算法示例【附csv文件下载】
2018/12/29 Python
python保存字典和读取字典的实例代码
2019/07/07 Python
python flask几分钟实现web服务的例子
2019/07/26 Python
python批量将excel内容进行翻译写入功能
2019/10/10 Python
解决Django no such table: django_session的问题
2020/04/07 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
Python基础教程(一)——Windows搭建开发Python开发环境
2020/07/20 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
巴西宠物商店:Cobasi
2019/04/19 全球购物
linux系统都有哪些运行级别
2016/03/26 面试题
python实现简单的名片管理系统
2021/04/26 Python
Pandas 稀疏数据结构的实现
2021/07/25 Python
使用 CSS 轻松实现一些高频出现的奇形怪状按钮
2021/12/06 HTML / CSS
nginx从安装到配置详细说明(安装,安全配置,防盗链,动静分离,配置 HTTPS,性能优化)
2022/02/12 Servers
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android