javascript - Javascript:使用“开-关”按钮反复自动刷新网页

我想使用Javascript自动刷新网页，而用户可以选择使用两个不同的按钮打开/关闭自动刷新功能（请注意，这些按钮使用<label>和<input>标签）。我已经尽力编写了代码，但我仍然不知道如何链接这两个代码，以使其能够正常运行。

另外，如果用户选择“自动刷新”按钮，则我希望在第一次加载后连续保持自动刷新，而不是仅自动刷新一次。

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

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>

最佳答案

这是您需要做的几件事：


两个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或其他方式保存该值。