利用JavaScript來達成網頁倒數計時後，跳至特定頁面

今天因為某些因素製作了一個網頁倒數計時後，轉跳至指定的頁面的小程式，在這邊分享給大家使用。使用到的技術是 CSS + JavaScript + HTML，非常的單純。

JS方面的重點程式碼：

<script>
  (function countdown(iCount, cUrl) {
    if (iCount === 0) { window.location.assign(cUrl); }
    document.getElementById('uCounter').innerHTML = iCount;
    setTimeout(function () { countdown(iCount - 1); }, 1000);
  })(10, "/YourUrl.html");
</script>

CSS方面的重點程式碼：

<style>
  .spinner {
    width: 70px;
    height: 70px;
    background-color: #5b99de;
    margin: 50px auto 50px auto;
    animation: RotatePlane 1.5s infinite ease-in-out;
  }
  .text {
    text-align: center;
    font-weight: bolder;
    font-size: 2rem;
    color: #5b99de;
  }
  @keyframes RotatePlane {
    0%   { transform: perspective(120px) rotateX(0deg) rotateY(0deg); }
    50%  { transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg); }
    100% { transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg); }
  }
</style>

運行時期的畫面範例

HTML CSS JavaScript Countdown Redirect Jump LinkTo LoadSelf