想给网页实现一个屏幕保护的效果。
当页面没有任何操作时,
开启一个图片轮播,假装成屏幕保护。
当用户点击轮播的图片,关闭轮播,显示页面。
思路是这样子。
现在,就差,
怎么用js监听页面没有任何操作。
大概思路:
1、监听用户的键盘操作(按键)和鼠标操作(移动、点击),并记录下操作时间,存入一个最后操作时间的变量
2、执行检查,确定是否触发“屏保”
思路如下:
// 最后一次键盘鼠标操作的时间
var lastOperateTime = new Date();
// 启动屏保时间,默认 30 秒
var SCREENSAVER_TIME = 30000;
// 当用户执行键盘、鼠标操作后,执行的函数
function afterOperate() {
var thisOperateTime = lastOperateTime = new Date();
setTimeout(function(){
if(thisOperateTime === lastOperateTime) {
// 启动屏保
} else {
// 此后,用户又进行了操作,所以不启动屏保
}
}, SCREENSAVER_TIME);
}
// 注册事件
document.onmousedown = afterOperate;
document.onscroll = afterOperate;
document.onkeypress = afterOperate;
while ture + click + sleep
setTimeout进入轮播,jq检测鼠标,键盘退出轮播?
(function () {
var setTimer = function () { return setTimeout(enter_screensaver, 600); };
var timer = setTimer();
$(document).mousemove(function () { quit_screensaver(); clearTimeout(timer); timer = setTimer(); });
}())