用輸入值替換jQuery變量值

Question

當鼠標閒置X秒時，我想添加一個屏保容器到我的網站。 我發現這個piece of code發生。如您所見，在顯示屏保之前，您需要設置自定義的等待時間（示例中爲3000毫秒）。我想要實現的是讓用戶通過輸入添加他們喜歡的時間量，並且該功能無需重新加載頁面即可生效。我對JavaScript的知識很差，雖然我搜索了很多，但我確定我不知道正確的搜索條件來幫助我找到解決方案，因此我在此尋求幫助。這可能嗎？如果是，我該怎麼辦？

在此先感謝。

Answer 1

這是一種簡化的版本，但至少應該讓你走在正確的道路上。

HTML

<input type="text" size="3" name="screensaverDelay" id="screensaverDelay" value="3000"/> 
<button id="changeDelay">Change Screensaver Delay</button> 
<div id="screensaver">This is my screensaver!!</div> 

的Javascript

$(function(){ 
    setScreensaver(3000); 
    $("#changeDelay").on("click", function(){ 
     setScreensaver($("#screensaverDelay").val()); 
    }); 
}); 

var timer; 

function setScreensaver(delaySeconds) 
{ 
    $(document).mousemove(function() { 
     if (timer) { 
      clearTimeout(timer); 
      timer = 0; 
     } 

     $('#screensaver').fadeOut(); 
     timer = setTimeout(function() { 
      $('#screensaver').fadeIn() 
     }, delaySeconds) 
    }); 
} 

CSS

#screensaver { 
    display: none; 
} 

See it in action