Javascript 自动刷新 HTML 如果按下按钮

Question

我有以下物品：

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

我想要以下内容：如果 class 是 btn-danger，onClick 将其更改为 btn-success 并激活超时为 5000 毫秒的自动刷新。如果再次单击按钮，将 class 更改为 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');
    }
}

我不知道如何activate/disable 页面自动刷新。我该怎么做？

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

Answer 1

DOMelement.classList property is the key to this as you have been using, but you also need to use a timer异步统计刷新页面

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

注意：出于安全原因，代码在 Stack Overflow "Code Snippet" 环境中无法正常工作，但在 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);

<a class="btn btn-danger w-100" id='refresh_button' href="#"> ↺ </a>

Answer 2

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

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

function disableTimer() {
    clearTimeout(arTimer);
}

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

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

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

Javascript 自动刷新 HTML 如果按下按钮

Javascript autorefresh HTML if button pressed

html

javascript

refresh