ホームページ >ウェブフロントエンド >jsチュートリアル >ユーザーがページを操作したかどうかを判定するJavaScriptについて詳しく解説

ユーザーがページを操作したかどうかを判定するJavaScriptについて詳しく解説

小云云オリジナル: 2018-05-18 10:00:262158ブラウズ

この記事は、ユーザーがページを操作したかどうかを判断するために、主に JavaScript に関する情報を紹介します。

ユーザーがページを操作したかどうかを判定するjavascript

jsを使ってユーザーがページを操作したかどうかを判定するには、アイデアを整理するだけです。

1. アイデア

ユーザーが操作インターフェイスを持っているかどうかに関係なく、ページが指定された時間内にイベントをトリガーするかどうかを検討できます。たとえば、ユーザーがクリックしたか、ボタンを押したか、またはマウスホイールを回転したかどうかなどです。ユーザーがマウスを動かしたかどうかなど。ユーザーがこれらの操作を行わない場合、ユーザーはページを操作していないと大まかに考えることができます。タイマーを付けることができます。ユーザーが指定された時間内にこれらのイベントをトリガーしたかどうかを記録します。コードの具体的な意味は説明しませんが、ざっくりとこんな感じです。

2. コードのデモ

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>js判断用户有没有操作页面</title>
</head>
<body>


<script>
 window.onload = function (){

   (function($){
     funObj = {
       timeUserFun:&#39;timeUserFun&#39;,
     }
     $[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(&#39;html&#39;);
       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:&#39;timeUserFun&#39;,
     }
     $[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(&#39;html&#39;);
       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について詳しく解説

関連記事