如何在 HTML/CSS 中添加特定于设备的变量？

Question

我正在编写一个跟踪选举的网站，我正在添加一个每分钟刷新一次的自动刷新功能。每次一个变量（调用seconds）和我的代码如下：

var secInterval = 0

var secInterval = setInterval(function() {

  var secInterval = secInterval + 1

  if (secInterval == 60){
    location.reload();
    var secInterval = 0
  }

}, 1000);

我想让用户设置页面刷新率。另外，我需要知道如何在网页被拉起时自动触发这个脚本。

Answer 1

您可以使用下拉菜单或任何合适的输入字段来获取用户输入的刷新间隔。然后将该输入存储在本地存储中。然后，当用户刷新页面或再次访问该页面时，它将使用保存的刷新间隔。

if (localStorage.getItem("refreshTime")){
  var refreshTime = localStorage.getItem("refreshTime");
}else{
  var refreshTime = 60;
}

var secInterval = 0;
    
    setInterval(function() {
      console.log(secInterval);
    
      secInterval = secInterval + 1

      if (secInterval == refreshTime){
        location.reload();
        secInterval = 0
      }

  }, 1000);


function setRefreshTime(){
  var refreshTimeInput = document.getElementById("refreshTime");
  refreshTime = refreshTimeInput.value;
  localStorage.setItem("refreshTime", refreshTime);
  console.log(refreshTime);
  secInterval = 0;
}

<select name="refreshTime" id="refreshTime">
  <option value="5">5</option>
  <option value="15">15</option>
  <option value="30">30</option>
  <option value="45">45</option>
  <option value="60">60</option>
</select>

<input type="button" value="Set Refresh Time"  onclick="setRefreshTime()"/>

如何在 HTML/CSS 中添加特定于设备的变量？

How do you add a specific-to-device variable in HTML/CSS?

html

javascript

variables

local