顯示感謝信息並重定向到另一個頁面

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">