关闭

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

时间: 2018-06-06阅读: 2372标签: 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 新标准的方式过于专横

我和我在微软的同事们认为世界需要更多的 Clippy——也就是这个可爱的动画回形针。为此,我们在 Edge 6.0 中引入了一项新功能。Web 开发者现在可以使用 <clippy> 来调用一个动画虚拟助手了。

web页面的回流和重绘

什么是回流? 回流也叫重排(reflow),当页面中的元素发生影响布局的变化,比如:改变宽高,修改显示影藏。页面需要重新布局,就会触发重排。 简单的说就是,页面布局改变,就会触发重排。

Web发展简史

Web架构: 用超文本技术(HTML)实现信息与信息的连接HTML:HyperText Mark-up Language,即超文本标记语言或超文本链接标示语言, 用统一资源定位技术(URI)实现全球信息的精确定位

web页面弹出遮罩层,通过js或css禁止蒙层底部页面跟随滚动

通过js或css禁止蒙层底部页面跟随滚动:pc端推荐给body添加样式overflow: hidden;height: 100%;移动端利用移动端的touch事件,来阻止默认行为,若应用场景是全平台我们要阻止页面滚动,那么何不将其固定在视窗(即position: fixed),这样它就无法滚动了,当蒙层关闭时再释放。

为什么说 Web 开发的未来在于组件?

预测未来并非易事。在预测社会现象的未来趋势时,我们不能认为未来就是当下现状的简单线性延伸——而 Web 开发就是一种社会现象

让Web应用更安全的13个小技巧

无论你是React、Angular、Vue.js,还是原生JavaScript开发者,你的代码都有可能成为黑客眼中的猎物。作为一个前端开发者,我们可能更加关注性能、SEO、UI/UX,往往会忽视安全问题。

web开发新手应该知晓的20件事

在我当初刚从事 web 开发的时候,有很多重要的事我并没有事先了解。现在看来,我的很多期望都和现实有很大的差距。在这篇文章里,我会告诉你 20 件事情,这些都是在你准备开始或者刚开始 web 开发不久的时候就应该知晓的

Web 研发模式的演变

Web 1.0 时代,非常适合创业型小项目,不分前后端,经常 3-5 人搞定所有开发。页面由 JSP、PHP 等工程师在服务端生成,浏览器负责展现。这种模式的好处是:简单明快

Web前端十种常用的技术

Web前端应用十种常用技术,随着JS与XHTML的应用普及,越来越多的web界面应用技术出现在网站上,比如我们常见的日历控件,搜索下拉框等,这些web界面应用技术大大的丰富了网站的表现形式

web页面录屏实现

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

点击更多...

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