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 相关文章推荐
addEventListener()第三个参数useCapture (Boolean)详细解析
Nov 07 Javascript
可自定义速度的js图片无缝滚动示例分享
Jan 20 Javascript
通过正则表达式实现表单验证是否为中文
Feb 18 Javascript
JS 排序输出实现table行号自增前端动态生成的tr
Aug 13 Javascript
javascript实现简单的页面右下角提示信息框
Jul 31 Javascript
jQuery实现切换页面过渡动画效果
Oct 29 Javascript
Node.js环境下JavaScript实现单链表与双链表结构
Jun 12 Javascript
jQuery过滤选择器经典应用
Aug 18 Javascript
jq实现左滑显示删除按钮,点击删除实现删除数据功能(推荐)
Aug 23 Javascript
原生Javascript插件开发实践
Jan 09 Javascript
angular4实现tab栏切换的方法示例
Oct 21 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 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
世界收音机发展史
2021/03/01 无线电
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
php截取字符串函数substr,iconv_substr,mb_substr示例以及优劣分析
2014/06/10 PHP
解决php表单重复提交实现方法
2015/09/29 PHP
php解决安全问题的方法实例
2019/09/19 PHP
JavaScript中的Array对象使用说明
2011/01/17 Javascript
基于jQuery实现的水平和垂直居中的div窗口
2011/08/08 Javascript
chrome原生方法之数组
2011/11/30 Javascript
jQuery插件animateSlide制作多点滑动幻灯片
2015/06/11 Javascript
javascript实现下拉提示选择框
2015/12/29 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
JavaScript 拖拽实例代码
2016/09/21 Javascript
详解JS几种变量交换方式以及性能分析对比
2016/11/25 Javascript
浅谈事件冒泡、事件委托、jQuery元素节点操作、滚轮事件与函数节流
2017/07/22 jQuery
Vue 项目分环境打包的方法示例
2018/08/03 Javascript
微信小程序的tab选项卡的实现效果
2019/05/15 Javascript
Django中处理出错页面的方法
2015/07/15 Python
详解python字节码
2018/02/07 Python
python:接口间数据传递与调用方法
2018/12/17 Python
python tkinter实现彩球碰撞屏保
2019/07/30 Python
Python脚本导出为exe程序的方法
2020/03/25 Python
Pyinstaller加密打包应用的示例代码
2020/06/11 Python
CSS3实现酷炫的3D旋转透视效果
2019/11/21 HTML / CSS
HTML5利用约束验证API来检查表单的输入数据的代码实例
2016/12/20 HTML / CSS
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
施华洛世奇匈牙利官网:SWAROVSKI匈牙利
2019/07/06 全球购物
纪念建党演讲稿范文
2014/01/13 职场文书
暑期社会实践心得体会
2014/09/02 职场文书
云南省召开党的群众路线教育实践活动总结会议新闻稿
2014/10/21 职场文书
党支部承诺书
2015/01/20 职场文书
党员干部廉洁自律承诺书
2015/04/28 职场文书
大学生受助感言
2015/08/01 职场文书
我的中国梦主题班会
2015/08/14 职场文书
MySQL快速插入一亿测试数据
2021/06/23 MySQL
vue+element ui实现锚点定位
2021/06/29 Vue.js
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python