Reciprocal 倒數

用於呈現時間倒數。

適用平台：官網、網銀、行動銀行

一般情境 強調情境
  • 背景色：#00A19B
  • 一格最多2個字元
  • 圓角4px
  • 背景色：#EF7800
  • 一格最多2個字元
  • 圓角4px

倒數器

SAMPLE

HTML

                                                                    
 <p id="Reciprocal"></p>
複製

CSS

                                                                                                 
#Reciprocal .time {
    background: #00a19b;
    padding: 6px;
    border-radius: 4px;
    color: #fff;
    margin: 0 4px;
    }
複製

JS

                                                                                       
// Set the date we're counting down to
var countDownDate = new Date("Jan 5, 2024 15:37:25").getTime();

// Update the count down every 1 second
var x = setInterval(function() {

    // Get today's date and time
    var now = new Date().getTime();
    
    // Find the distance between now and the count down date
    var distance = countDownDate - now;
    
    // Time calculations for days, hours, minutes and seconds
    var days = Math.floor(distance / (1000 * 60 * 60 * 24));
    var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
    var seconds = Math.floor((distance % (1000 * 60)) / 1000);
    
    // Output the result in an element with id="demo"
    document.getElementById("Reciprocal").innerHTML ="距離搶購倒數<span class='time'>" + days + "</span><span>天</span> <span class='time'>" + hours + "</span><span>時</span> <span class='time'>"
    + minutes + "</span><span>分</span>";
    
    // If the count down is over, write some text 
    if (distance < 0) {
    clearInterval(x);
    document.getElementById("demo").innerHTML = "EXPIRED";
    }
}, 1000);
複製