原生js判断用户是否操作了web页面

时间: 2018-06-06阅读: 2148标签: web

实现思路

用户是否操作了web页面,我们可以在一定时间内根据用户是否触发了某些事件进行判断。比如用户是否点击,是否按键,是否移动了鼠标,以及滚动鼠标滚轴等。如果用户在设定的时间段内没有进行这些操作,我们就能认为用户没有操作web页面。

这里以监听鼠标移动事件来判断,通过一个定时器,来记录用户在规定时间内用户有没有触发改事件,下面就直接贴代码


实现代码

var last = new Date().getTime(),
	curr = new Date().getTime(),
	out = 1 * 60 * 1000; //设置超时时间: 1分
document.onmouseover=function(){//监听鼠标移动事件
	last = new Date().getTime(); //更新操作时间
};
var inter=setInterval(function(){/*定时器  间隔1秒检测是否长时间未操作页面 */
	curr = new Date().getTime(); //更新当前时间
    if(curr - last > out){ //判断是否超时
    	clearInterval(inter);//清空定时器
        console.log("那么长时间没未操作了!");//超时操作
    }
}, 1000);


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/857

关闭

Web认证_介绍Web开发中几种常用的认证机制

如今web服务随处可见,成千上万的web程序被部署到公网上供用户访问,有些系统只针对指定用户开放,属于安全级别较高的web应用,他们需要有一种认证机制以保护系统资源的安全,本文将探讨五种常用的认证机制及优缺点。

web的应用模式

在开发web应用中,有两种模式:1、前后端分离。2、前后端不分离。在前后端分离的应用模式中,我们通常将后端开发的每个视图都成为一个接口。或者API。前端通过访问接口来对数据进行增删改查。

选择学习Web前端开发的理由

在互联网的影响下,移动互联网产业的发展也突飞猛进,越来越多的企业开始攻击移动互联网的大蛋糕。根据可靠的数据分析,中国对开发商的需求高达200万人,而且数据仍在改善。

如何迁移Flutter项目到Flutter Web?

这篇简单介绍下怎么将一个现有的 Flutter 项目转成 Flutter Web 项目。开始之前先浇一盆冷水,我们理想中的一套代码、多端运行的愿望是要破灭了,至少目前版本的 Flutter Web SDK 是没法做到的

学习web的方法有哪些

Web技术的参与门槛低,工资高,发展前景良好,已成为近年来的热门岗位,很多IT公司在招聘时都希望招聘会web技术的人员,但是想学好web前端,特别是对于没有基础的初学者来说

web页面录屏实现

如果你的应用有接入到web apm系统中,那么你可能就知道apm系统能帮你捕获到页面发生的未捕获错误,给出错误栈,帮助你定位到BUG。但是,有些时候,当你不知道用户的具体操作时,是没有办法重现这个错误的,这时候,如果有操作录屏,你就可以清楚地了解到用户的操作路径

如何提升学习Web前端的效率

当下是个追求效率的社会,对于IT行业而言,尤其如此。如何在短时间内提升学习Web前端的效率,成为很多同学关注的焦点。接下来分享一些快速学习Web前端的方法。

什么是web前端?前端工程师前景如何

Web为你在浏览器、APP、应用程序等设备上提供直观界面,这些界面展现以及用户交互就是前端。从2016年到2018年,web前端岗位从之前的爆发式增长变为平稳的发展

Web开发必须掌握的三个技术:Token、Cookie、Session

在Web应用中,HTTP请求是无状态的。即:用户第一次发起请求,与服务器建立连接并登录成功后,为了避免每次打开一个页面都需要登录一下,就出现了cookie,Session。

Web前端设计排版小技巧

web设计排版多种多样,如何更好的排版、设计出更符合美学的设计了?设计该如何更好的做好网页设计的布局排版了,今天给大家分享这几个小技巧,希望大家能有所用。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!