Home
thủ-thuật-blog

Code Đồng hồ đếm ngược thời gian

#code dem nguoc, #dem nguoc thoi gian, #countdown
Đôi khi chúng ta có một sự kiện hay một ngày đặc biệt nào đó mà chúng ta cần biết còn bao nhiêu thời gian nữa sẽ đến thì bài viết này sẽ giúp bạn giải quyết vấn đề đó.
Bài viết này mình xin giới thiệu 03 Type - Countdown đến bạn tham khảo.

#Type 1.Đếm ngược với thời gian cụ thể

Thời gian cần đếm : 00:00:00 01/01/2030

<script type="text/javascript">
var year=2030;//năm
var month=01;//tháng 
var day=01;//ngày
var h=00;//giờ
var i=00;//phút
var s=00;//giây
dateFuture1 = new Date(year,month,day,h,i,s);
function GetCount(ddate,iid){
dateNow = new Date(); //grab current date
amount = ddate.getTime() - dateNow.getTime(); //calc milliseconds between dates
delete dateNow;
// if time is already past
if(amount < 0){
document.getElementById(iid).innerHTML="Now!";
}
// else date is still good
else{
days=0;hours=0;mins=0;secs=0;out="";
amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs
days=Math.floor(amount/86400);//days
amount=amount%86400;
hours=Math.floor(amount/3600);//hours
amount=amount%3600;
mins=Math.floor(amount/60);//minutes
amount=amount%60;
secs=Math.floor(amount);//seconds
out += (days<=9?'0':'')+days +" "+((days==1)?"Ngày":"Ngày")+", ";
out += (hours<=9?'0':'')+hours +" "+((hours==1)?"hour":"Giờ")+", ";
out += (mins<=9?'0':'')+mins +" "+((mins==1)?"min":"Phút")+", ";
out += (secs<=9?'0':'')+secs +" "+((secs==1)?"sec":"Giây")+", ";
out = out.substr(0,out.length-2);
document.getElementById(iid).innerHTML=out;
setTimeout(function(){GetCount(ddate,iid)}, 1000);
}
}
window.onload=function(){
GetCount(dateFuture1, 'countbox1');
//you can add additional countdowns here (just make sure you create dateFuture2 and countbox2 etc for each)
};
</script>
<div id="countbox1">
</div>
Bạn tùy chỉnh lại Giờ/Phút/Giây - Ngày/Tháng/Năm theo ý của bạn.

#Type 2.Đếm ngược Expired

Thời gian cần đếm : 365 day

<p id="countdown"></p>
<script>
function updateCountdown() {
  let now = new Date();
  let target = new Date(now.getFullYear(), now.getMonth(), now.getDate() + 365, 0, 0, 0);
  let diff = target - now;
  if (diff <= 0) {
    document.querySelector("#countdown").innerHTML = "Expired";
    return;
  }
  let days = Math.floor(diff / 1000 / 60 / 60 / 24);
  let hours = Math.floor(diff / 1000 / 60 / 60) % 24;
  let minutes = Math.floor(diff / 1000 / 60) % 60;
  let seconds = Math.floor(diff / 1000) % 60;
  document.querySelector("#countdown").innerHTML = `Time left: ${days}d ${hours}h ${minutes}m ${seconds}s`;
}
updateCountdown();
setInterval(updateCountdown, 1000);
</script>

#Type 3.Đếm ngược Nâng cao

Thời gian cần đếm : 00:00:00 01/01/2030

TIME REMAINING
Ngày
Giờ
Phút
Giây


<!-- Display the countdown timer in an element -->
<style>
{
  font-size: 16px;
 font-weight: normal;
  margin: 0x;
 text-align: left;
     border-bottom: 2px solid #a0a0b1;
    width: 100%;
    /* padding-bottom: 0px; */
    margin-bottom: 2px;
 margin-top: 10px;
}
 #clockdiv{
    font-family: sans-serif;
    color: #fff;
    display: inline-block;
    font-weight: bold;
    text-align: center;
    font-size: 14px;
 float: left;
}
#clockdiv > div{
    padding: 0px;
    border-radius: 3px;
    background: #00816A;
    display: inline-block;
}
#clockdiv div > span{
    padding: 8px 16px;
    border-radius: 3px;
    background: #ff3a56;
    display: inline-block;
 font-size: 14px;
}
smalltext{
    padding-top: 5px;
    font-size: 16px;
}
</style>
<h5>TIME REMAINING </h5>
<div id="clockdiv">
  <div>
  <div class="smalltext">Ngày</div>
    <span class="days" id="day"></span>
  </div>
  <div>
 <div class="smalltext">Giờ</div>
    <span class="hours" id="hour"></span>
  </div>
  <div>
 <div class="smalltext">Phút</div> 
    <span class="minutes" id="minute"></span>
  </div>
  <div>
 <div class="smalltext">Giây</div> 
    <span class="seconds" id="second"></span>
  </div>
</div>
<p id="demo"></p>
<script>
var deadline = new Date("January 1, 2030 00:00:00").getTime();
var x = setInterval(function() {
var now = new Date().getTime();
var t = deadline - now;
var days = Math.floor(t / (1000 * 60 * 60 * 24));
var hours = Math.floor((t%(1000 * 60 * 60 * 24))/(1000 * 60 * 60));
var minutes = Math.floor((t % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((t % (1000 * 60)) / 1000);
document.getElementById("day").innerHTML =days ;
document.getElementById("hour").innerHTML =hours;
document.getElementById("minute").innerHTML = minutes; 
document.getElementById("second").innerHTML =seconds; 
if (t < 0) {
        clearInterval(x);
        document.getElementById("demo").innerHTML = " OK ";
        document.getElementById("day").innerHTML ='0';
        document.getElementById("hour").innerHTML ='0';
        document.getElementById("minute").innerHTML ='0' ; 
        document.getElementById("second").innerHTML = '0'; }
}, 1000);
</script>
<!--End Countdown -->