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

【问题标题】：Display thank you message and redirect to another page显示感谢信息并重定向到另一个页面
【发布时间】：2021-09-29 04:21:14
【问题描述】：

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

如何创建不是弹窗提醒，而是一种中间3-4秒“谢谢”的临时空白页？

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

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

&lt;input type="button" onclick="two();" value="Submit"&gt;

【问题讨论】：

标签： javascript onclick href alert form-submit

【解决方案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>

【讨论】：

非常感谢@Mr。多旋风！我可以以某种方式提高您的评分吗？
@VolodyaZhyla 你重视接受我的回复，如果这有助于你实现你想要的行为。

【解决方案2】：

你可以使用 setTimeout

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

【讨论】：

谢谢，伙计！

【解决方案3】：

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

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

&lt;input type="button" onclick="two();" value="Submit"&gt;

【讨论】：

谢谢，伙计！