如果鼠標移動5秒鐘時隱藏輸入

Question

我有一個頁面reqad.co.nf的HTML img輸入作爲全屏幕功能，如果鼠標不移動5秒，該如何隱藏輸入，並再次出現，如果它再次移動？ <input type="image" src="fullscreenico.png" align="right" onclick="toggleFullScreen()">

Answer 1

這裏有一個jQuery的解決方案的一個片段：

jQuery(document).ready(function(){ 
 
     var lastTimeMouseMoved; 
 
     var alreadyPrompt = false; 
 
     $(document).mousemove(function(e){ 
 
      lastTimeMouseMoved = new Date().getTime(); 
 
      alreadyPrompt = false; 
 
      $(".theInputIdLikeToHide").show(); 
 
     }); 
 
     setInterval(function(){ 
 
     \t if(!alreadyPrompt){ 
 
     \t \t var currentTime = new Date().getTime(); 
 
      if (currentTime - lastTimeMouseMoved > 5000) { 
 
       $(".theInputIdLikeToHide").hide(); 
 
       alreadyPrompt = true; 
 
      } 
 
      } 
 
     }, 500); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input class="theInputIdLikeToHide">