显示感谢信息并重定向到另一个页面

Question

目前，我设法在点击事件后创建警报弹出窗口“谢谢”。 它工作 1 秒并重定向到https://www.w3schools.com 。

如何创建不是弹出式警报，而是一种中间有 3-4 秒“谢谢”的临时空白页？

在此之后，我想被重定向到https://www.w3schools.com 。

 function two() { alert('Thanks'); window.location.href = 'https://www.w3schools.com'; }

 <input type="button" onclick="two();" value="Submit">

Answer 1

您可以创建一个显示在当前内容上方的启动页面，然后使用超时来重定向用户。

编辑：将文本移动到 CSS 规则。 如果您不想这样做，请在<div class="thanks">标签内添加文本并删除:after CSS 规则。

 function redirect() { document.querySelector('.thanks').classList.remove('thanks-hidden'); setTimeout(() => { window.location.href = 'https://www.w3schools.com/'; }, 3000); // Wait 3 seconds and then redirect. }

 .thanks { display: flex; position: absolute; top: 0; left: 0; z-index: 999; width: 100%; height: 100%; background: #FFF; justify-content: center; align-items: center; font-size: 2em; } .thanks:after { content: "Thanks"; } .thanks-hidden { display: none; }

 <input type="button" onclick="redirect()" value="Submit"> <div class="thanks thanks-hidden"></div>

Answer 2

您可以使用 setTimeout

function two() {
  alert('Thanks');
  setTimeout(function() {
    window.location.href = 'https://www.w3schools.com';
  }, 4000 /* ms to delay for*/);
}

Answer 3

您可以使用setTimeout为特定功能设置计时器。 您可以使用innerHTML来清除正文的内容。

 function two() { alert('Thanks'); document.body.innerHTML = ''; setTimeout(() => { window.location.href = 'https://www.w3schools.com'; },4000); }

 <input type="button" onclick="two();" value="Submit">