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

用输入值替换jquery变量值

1 个答案: