javascript 判斷用戶有沒有操作頁面
javascript 判斷用戶有沒有操作頁面
用js判斷用戶有沒有操作頁面,我們所要做的就是整理我們的思路。
一、思路
用戶有沒有操作界面,我們可以從頁面在規(guī)定時(shí)間內(nèi)有沒有觸發(fā)事件去考慮。比如用戶有沒有點(diǎn)擊,有沒有按鍵,有沒有滾動(dòng)鼠標(biāo)滾軸。用戶有沒有移動(dòng)鼠標(biāo)等等。如果用戶沒有進(jìn)行這些操作,那么我們可以大概的認(rèn)為用戶沒有操作頁面。我們可以給一個(gè)定時(shí)器。來記錄在規(guī)定時(shí)間內(nèi)用戶有沒有觸發(fā)這些事件。我直接貼代碼,代碼的具體含義,我就不再講解,思路大概就是這樣。
二、代碼演示
<!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) // 用戶到達(dá)未操作事件 做一些處理
}
},
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)
// 直接調(diào)用 參數(shù)代表分鐘數(shù),可以有一位小數(shù);
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) // 用戶到達(dá)未操作事件 做一些處理
}
},
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)
// 直接調(diào)用 參數(shù)代表分鐘數(shù),可以有一位小數(shù);
timeUserFun(0.1);
}
</script>
</body>
</html>
如有疑問請(qǐng)留言或者到本站社區(qū)交流討論,感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
相關(guān)文章
JS的時(shí)間格式化和時(shí)間戳轉(zhuǎn)換函數(shù)示例詳解
這篇文章主要介紹了JS的時(shí)間格式化和時(shí)間戳轉(zhuǎn)換函數(shù),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
jQuery NProgress.js加載進(jìn)度插件的簡(jiǎn)單使用方法
NProgress是基于jquery的,且版本要 >1.8 。這篇文章主要介紹了NProgress.js加載進(jìn)度插件的簡(jiǎn)單使用方法,需要的朋友可以參考下2018-01-01
JS利用?clip-path?實(shí)現(xiàn)動(dòng)態(tài)區(qū)域裁剪功能
這篇文章主要介紹了JS利用?clip-path?實(shí)現(xiàn)動(dòng)態(tài)區(qū)域裁剪功能,文中主要通過使用 box-shadow 實(shí)現(xiàn),代碼簡(jiǎn)單易懂,對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-12-12
微信小程序后端(java)開發(fā)流程的詳細(xì)步驟
這篇文章主要介紹了微信小程序后端開發(fā)流程的詳細(xì)步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
070823更新的一個(gè)[消息提示框]組件 兼容ie7
070823更新的一個(gè)[消息提示框]組件 兼容ie7...2007-08-08
div+css布局的圖片連續(xù)滾動(dòng)js實(shí)現(xiàn)代碼
整理一個(gè)div+css圖片連續(xù)滾動(dòng)代碼,原理跟腳本之家之前發(fā)布的文章一樣。2010-05-05
JavaScript將當(dāng)前時(shí)間轉(zhuǎn)換成UTC標(biāo)準(zhǔn)時(shí)間的方法
這篇文章主要介紹了JavaScript將當(dāng)前時(shí)間轉(zhuǎn)換成UTC標(biāo)準(zhǔn)時(shí)間的方法,涉及javascript中Date及toUTCString方法的使用技巧,需要的朋友可以參考下2015-04-04

