Code đếm ngược thời gian v3

☑ Copy

<div style="background-color: mistyrose; padding: 3px;">
<div id="scg-nyc-wrapper">
    <div id="scg-nyc-msg">Thời gian đến ngày lễ</div>
    <div id="scg-nyc-msg">HIẾN CHƯƠNG NHÀ GIÁO</div>
    <div class="scg-nyc-digits-wrapper">
        <div class="scg-nyc-digits-type">Days</div>
        <div class="scg-nyc-digit" id="scg-clock-days">
            <span>0</span><span>0</span><span>0</span>
        </div>
    </div>
    <div class="scg-nyc-digits-wrapper scg-nyc-sep"> : </div>
    <div class="scg-nyc-digits-wrapper">
        <div class="scg-nyc-digits-type">Hours</div>
        <div class="scg-nyc-digit" id="scg-clock-hr">
            <span>0</span><span>0</span>
        </div>
    </div>
    <div class="scg-nyc-digits-wrapper scg-nyc-sep"> : </div>
    <div class="scg-nyc-digits-wrapper">
        <div class="scg-nyc-digits-type">Minutes</div>
        <div class="scg-nyc-digit" id="scg-clock-mins">
            <span>0</span><span>0</span>
        </div>
    </div>
    <div class="scg-nyc-digits-wrapper scg-nyc-sep"> : </div>
    <div class="scg-nyc-digits-wrapper">
        <div class="scg-nyc-digits-type">Seconds</div>
        <div class="scg-nyc-digit" id="scg-clock-secs">
            <span>0</span><span>0</span>
        </div>
    </div>
</div>
</div>

<style type="text/css">
#scg-nyc-wrapper{color:blue;font-size:30px;line-height:normal;text-align:center;cursor:pointer;padding:5px;background:rgba(255, 255, 255, 0.5);}
.scg-nyc-digits-wrapper{display:inline-block;vertical-align:bottom}
.scg-nyc-digits-type{font-size:13px}
.scg-nyc-digit > span{background:#fff none repeat scroll 0 0;border:1px solid rgba(0,0,0,0.1);border-radius:5px;box-shadow:1px 1px 1px #d1c1c1;display:inline-block;padding:2px 7px;margin:0 1px}
.scg-nyc-sep{padding:5px 0;animation:sep-blinks 1s linear infinite;-moz-animation:sep-blinks 1s linear infinite;-webkit-animation:sep-blinks 1s linear infinite;}
@keyframes sep-blinks {
0%{opacity:1}
50%{opacity:0}
100%{opacity:1}
}
@-moz-keyframes sep-blinks {
0%{opacity:1}
50%{opacity:0}
100%{opacity:1}
}
@-webkit-keyframes sep-blinks {
0%{opacity:1}
50%{opacity:0}
100%{opacity:1}
}
</style>

<script type="text/JavaScript">
function startTimer() {
    /**
     Countdown Timer
     Author: Anhlevan
     url: https://s-anhlevan.blogspot.com/
    **/
    var newyr=new Date("11 20, 2024 00:00:00");
    var newyeartime=newyr.getTime();
    var todaytm=new Date();
    var todaytime=todaytm.getTime();
    var timeleft=newyeartime-todaytime;
    var leftdays = timeleft/86400000;
    var lefthr=23-todaytm.getHours();
    var leftmin=59-todaytm.getMinutes();
    var leftsec=59-todaytm.getSeconds();
    if (Math.floor(leftdays) <= -1) {
        document.getElementById('scg-nyc-msg').innerHTML="Đã qua rồi ngày lễ";
        return;
    } else {
        document.getElementById('scg-clock-days').innerHTML= scgWrapChars(Math.floor(leftdays), -3);
        document.getElementById('scg-clock-hr').innerHTML= scgWrapChars(lefthr, -2);
        document.getElementById('scg-clock-mins').innerHTML= scgWrapChars(leftmin, -2);
        document.getElementById('scg-clock-secs').innerHTML= scgWrapChars(leftsec, -2);
    }
    setTimeout('startTimer()',999);
}
eval(atob('c3RhcnRUaW1lcigpO2RvY3VtZW50LmdldEVsZW1lbnRCeUlkKCJzY2ctbnljLXdyYXBwZXIiKS5vbmNsaWNrPWZ1bmN0aW9uKCl7d2luZG93LmxvY2F0aW9uPSJodHRwczovL3MtYW5obGV2YW4uYmxvZ3Nwb3QuY29tLyJ9'));
function scgWrapChars(str, pad) {
    str = (Math.pow(10, Math.abs(pad)) + str.toString()).slice(pad);
    return str.replace(/\w/g, "<span>$&</span>");
}
</script>

---

Demo: Đếm ngược thời gian đến ngày lễ HIẾN CHƯƠNG NHÀ GIÁO 20-11-2024

Đã qua rồi ngày lễ

HIẾN CHƯƠNG NHÀ GIÁO

Days

000

:

Hours

00

:

Minutes

00

:

Seconds

00