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 相关文章推荐
WebGame《逆转裁判》完整版 代码下载(1月24日更新)
Jan 29 Javascript
判断字符串的长度(优化版)中文占两个字符
Oct 30 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
vuejs在解析时出现闪烁的原因及防止闪烁的方法
Sep 19 Javascript
Vue插件写、用详解(附demo)
Mar 20 Javascript
微信小程序中添加客服按钮contact-button功能
Apr 27 Javascript
解决vue attr取不到属性值的问题
Sep 18 Javascript
layui实现左侧菜单点击右侧内容区显示
Jul 26 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
记一次用ts+vuecli4重构项目的实现
May 21 Javascript
Vuex中的Mutations的具体使用方法
Jun 01 Javascript
vue 数据遍历筛选 过滤 排序的应用操作
Nov 17 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
编译问题
2006/10/09 PHP
在PHP中检查PHP文件是否有语法错误的方法
2009/12/23 PHP
PHP加密技术的简单实现
2016/09/04 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
关于laravel-admin ueditor 集成并解决刷新的问题
2019/10/21 PHP
JavaScript Event学习第九章 鼠标事件
2010/02/08 Javascript
node.js中的fs.createWriteStream方法使用说明
2014/12/17 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
jquery关于事件冒泡和事件委托的技巧及阻止与允许事件冒泡的三种实现方法
2015/11/27 Javascript
AngularJS基础 ng-csp 指令详解
2016/08/01 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
jQuery常见的选择器及用法介绍
2016/12/20 Javascript
vue.js使用watch监听路由变化的方法
2018/07/08 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
2019/01/18 Javascript
一文了解Vue中的nextTick
2019/05/06 Javascript
JS字符串和数组如何实现相互转化
2020/07/02 Javascript
js实现移动端轮播图滑动切换
2020/12/21 Javascript
手写Vue源码之数据劫持示例详解
2021/01/04 Vue.js
Python文件读取的3种方法及路径转义
2015/06/21 Python
对python list 遍历删除的正确方法详解
2018/06/29 Python
python实现文本进度条 程序进度条 加载进度条 单行刷新功能
2019/07/03 Python
Pytorch技巧:DataLoader的collate_fn参数使用详解
2020/01/08 Python
Keras中的两种模型:Sequential和Model用法
2020/06/27 Python
如何用Matlab和Python读取Netcdf文件
2021/02/19 Python
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
Michael Kors英国官网:美国奢侈品品牌
2019/11/13 全球购物
计算机学生的自我评价分享
2014/02/18 职场文书
大学理论知识学习自我鉴定
2014/04/28 职场文书
志愿者宣传口号
2014/06/17 职场文书
万能检讨书开头与结尾怎么写
2015/02/17 职场文书
毕业论文致谢格式模板
2015/05/14 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
k-means & DBSCAN 总结
2021/04/27 Python
教你使用pyinstaller打包Python教程
2021/05/27 Python