Javascript：反复自动刷新带有ON-OFF按钮的网页

我想使用Javascript自动刷新我的网页，而用户可以选择使用两个不同的按钮打开/关闭自动刷新功能（请注意按钮使用<label>和<input>标签）。我尽我所能写代码，但我仍然不知道如何连接这两个代码，以便它可以正常工作。另外，如果用户选择自动刷新开启的按钮，我想在第一次加载之后不断自动刷新，而不是仅仅自动刷新一次。Javascript：反复自动刷新带有ON-OFF按钮的网页

请您帮我修改我的密码吗？谢谢。

为ON和OFF按钮（两个单独的按钮）代码：

<div class="page-header-actions" data-toggle="buttons" role="group"> 
    <label class="btn btn-outline btn-primary active"> 
    <input type="radio" name="options" autocomplete="off" value="autorefreshoff" checked /> 
    <i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh OFF 
    </label> 
    <label onClick="startrefreshon" class="btn btn-outline btn-primary"> 
    <input type="radio" autocomplete="off" value="autorefreshon" /> 
    <i class="icon wb-check text-active" aria-hidden="true"></i> Auto Refresh ON 
    </label> 
</div>

自动刷新功能的代码：

<script type='text/javascript'> 
setTimeout(function(){ 
    window.location.reload(1); 
}, 5000); 
</script>

来源

2017-01-23 Dennis

我不认为你能够做到这一点不幸。您可能能够停止刷新，但无法再次将其重新打开，而无法刷新页面。 –

@ FrederickM.Rogers哦，如果我想在默认情况下打开自动刷新功能，它可以通过点击自动刷新关闭按钮来关闭刷新功能？可能吗？ – Dennis

@ FrederickM.Rogers让我来解释一下。我想在默认情况下启用自动刷新开启功能（即它会每隔1分钟重复自动刷新一次页面），用户可以通过点击关闭按钮（即关闭自动刷新功能）来选择关闭自动刷新功能。该页面将不会自动刷新）？这是可能的吗？我应该如何编写代码？ – Dennis

下面是你需要做的几件事情：

input type="radio"都应该有相同的name。
为'自动刷新'按钮设置一个ID，以便您可以使用JavaScript代码轻松引用它（如auto-refresh-checkbox）。
收件来检查，如果该复选框是重装功能checked

代码：

function reloadPage(){ 
    var refreshEnabled = document.getElementById('auto-refresh-checkbox'); 
    if(refreshEnabled.checked) { 
    window.location.reload(1); 
    } 
}

然后调用经由setInterval

此功能setInterval(reloadPage, 5000);

PS：选中的“自动刷新”无线电将失去它在页面重新加载时的值，因此您可能必须使用localStorage或其他方式保存该值。

来源

2017-01-23 16:12:13 vsr

太棒了！你的代码工作正常。如果我想在默认情况下启用自动刷新开启功能（即它会每隔1分钟重复自动刷新页面），用户可以选择关闭自动刷新功能，方法是单击关闭按钮（即该页面不会自动刷新）？这是可能的吗？我应该如何编写代码？ – Dennis

要使其默认开启，请将'checked'属性从OFF单选按钮移动到您的html中的ON单选按钮。 – vsr

是的，它的工作原理！:)现在它可以保持刷新一旦加载。那么，如何通过点击OFF按钮来停止自动刷新页面？ – Dennis

Javascript：反复自动刷新带有ON-OFF按钮的网页

回答

相关问题