如果按下按钮，Javascript 会自动刷新 HTML答案

【问题标题】：Javascript autorefresh HTML if button pressed如果按下按钮，Javascript 会自动刷新 HTML
【发布时间】：2018-05-01 17:51:47
【问题描述】：

我有以下物品：

<a class="btn btn-danger w-100" style='color: White' id='refresh_button' onclick="activateAutorefresh()"> ↺ </a>

我想要以下内容：如果类是 btn-danger，onClick 将其更改为 btn-success 并以 5000 毫秒的超时激活自动刷新。如果再次单击按钮，请将类更改为 btn-danger 并禁用自动刷新。

所以，我有以下代码：

function activateAutorefresh(){
    if (document.getElementById("refresh_button").classList.contains('btn-danger')){
        document.getElementById("refresh_button").classList.remove('btn-danger');
        document.getElementById("refresh_button").classList.add('btn-success');
    }
    else {
        document.getElementById("refresh_button").classList.remove('btn-success');
        document.getElementById("refresh_button").classList.add('btn-danger');
    }
}

我不知道如何激活/禁用页面自动刷新。我该怎么做？

此外，在刷新时保持当前的自动刷新状态。

【问题讨论】：

标签： javascript html refresh

【解决方案1】：

DOM element.classList property 是您一直使用的关键，但您还需要使用 timer 来异步计数和刷新页面.

现在，当页面刷新时，有关前一页的所有数据都将丢失，因此您必须存储所需的数据，然后再将其取出。这可以通过多种方式完成，但 localStorage 是最简单的。

注意：由于安全原因，代码在 Stack Overflow“代码片段”环境中无法运行，但在 Web 服务器上运行时可以运行。

// Place all of the following code in a <script> that is just before the closing body tag (</body>) 

// Get reference to element
var link = document.getElementById("refresh_button");

// Retrieve the last state of the link's classes from localStorage
link.className = localStorage.getItem("linkClassList");

// Set up the event handler
link.addEventListener("click", activateAutoRefresh);

let timer = null; // Will hold reference to timer

function activateAutoRefresh(evt){

  // Test to see if the clicked element has the "btn-danger" class
  if(this.classList.contains("btn-danger")){
    this.classList.remove("btn-danger");
    this.classList.add("btn-success");
    timer = setTimeout(function(){ location = location;}, 5000); // Refresh after 5 seconds
  } else {
    this.classList.remove("btn-success");
    this.classList.add("btn-danger"); 
    clearTimeout(timer);  // Cancel the timer
  }
}

// Set the link's class list into localStorage
link.className = localStorage.setItem("linkClassList", link.className);

&lt;a class="btn btn-danger w-100" id='refresh_button' href="#"&gt; ↺ &lt;/a&gt;

【讨论】：

您忘记将setTimeout(...) 引用保存到time
这几乎是完美的！刷新后，按钮变成btn-danger，如何让它记住btn-success？
@ScottMarcus 它不工作斯科特。刷新后，按钮回到btn-danger
@ScottMarcus 这是错误：null 不是对象（正在评估'link.className'）
@Lechucico 确保所有这些代码都在 script 元素内，并且该元素位于结束 body 标记 (</body>) 之前。

【解决方案2】：

您应该编写不同的函数来处理自动刷新和启用/禁用计时器，

var arTimer;
function enableTimer() {
    arTimer = setTimeout(autoRefresh, 5000);
}

function disableTimer() {
    clearTimeout(arTimer);
}

function autoRefresh() {
    /* Code for auto refresh goes here */
}

当你想启动定时器时调用enableTimer()，当你想在定时器到期前清除定时器时调用diableTimer()。

autoRefresh() 函数应该包含自动刷新的代码。

【讨论】：