Html 網頁倒數計時重新導向 (使用 JavaScript) 😍

2022-05-16

說明如何設計一個簡單的倒數計時重新導向的網頁，可以用於轉址、訊息傳達等用途。

說明

版面訊息

<h1>網頁訊息</h1>
<div class="block">
  <p>您好，這個網頁已經不再提供服務，請參考我們的新網站 
    <a href="https://sdwh.dev">https://sdwh.dev</a>
  </p>
  <p>
    網頁將於 <span id="secs">5</span> 秒後自動轉向 
    <strong>https://sdwh.dev</strong>，祝您有個愉快的一天 😉
  </p>
</div>

h1 {
  text-align: center;
}
.block {
  width: 75%;
  margin: 0 auto;
  border: 2px solid burlywood;
  padding: 1rem;
  font-size: 1.5rem;
}

核心程式

var counter = 5;
$(document).ready(function(){
  console.log(Document.referrer);
  interval = window.setInterval(( updateSecs ), 1000);
})

function updateSecs(){
  counter -= 1;
  $('#secs').text(counter)

  if (counter == 0) {
    clearInterval(interval);
    window.location.href = "https://sdwh.dev";
  }
}