javascript - 清除间隔 + 消息并替换为链接

Question

如何清理间隔+消息并用链接替换它们。

下面的代码在 10 秒后在新窗口中打开一个链接。当我返回该页面时，消息显示您将在 0 秒后重定向

我想要的是，10 秒后(在新选项卡中打开链接后)计数器和消息将替换为新消息和链接。即如果您没有被重定向到链接 Click Here转到链接。

var count = 10;
var counter;

function start(){
  counter = setInterval(timer, 1000);
}
 
function timer() {   
  var output = document.getElementById("displaySeconds");
  output.innerHTML = count;   
  count--;    
  if (count < 0) { 
    clearInterval(counter);    
    window.open("https://www.google.com");
    return;
  }
} 

window.addEventListener("load", start, false);

<br>You will redirect in <span id="displaySeconds">10</span> seconds.<br />

Answer 1

当用户未重定向且 display 属性设置为 none (display: none )。当计时器到期时，您可以隐藏原始文本并显示替代版本。

下面有一个可用的 jsfiddle。我将计数器修改为4秒，以免等待太久，您可以根据需要调整它。

var count = 4;
var counter;

function start() {
  counter = setInterval(timer, 1000);
}

function timer() {
  var output = document.getElementById("displaySeconds");
  output.innerHTML = count;
  count--;
  if (count < 0) {
    clearInterval(counter);
    window.open("https://www.google.com");
    
    let originalText = document.getElementById("original");
    let noRedirectText = document.getElementById("noredirect");
    
    originalText.style.display = "none";
    noRedirectText.style.display = "block";
  }
}
window.addEventListener("load", start, false);

<div>
  <div id="original">
    You will be redirected in <span id="displaySeconds">4</span> seconds.
  </div>

  <div style="display: none" id="noredirect">
    If you are not redirected click <a href="https://www.google.com">here</a> to go to the link.
  </div>
</div>

干杯!