Thêm code đếm ngược thời gian

Eric (kedochanh)
0
13/12/24
13/12/2024
<div id="clockdiv">
  <span>
    <span class="minutes"></span>
    <span class="smalltext">Phút</span>
  </span>
  <span>
    <span class="seconds"></span>
    <span class="smalltext">Giây</span>
  .</span>
</div>

Thêm code này vào body hoặc footer.js

<script type="text/javascript"> 	
	function getTimeRemaining(endtime) {
		
  const total = Date.parse(endtime) - Date.parse(new Date());
  const seconds = Math.floor((total / 1000) % 60);
  const minutes = Math.floor((total / 1000 / 60) % 60);
  const hours = Math.floor((total / (1000 * 60 * 60)) % 24);
  const days = Math.floor(total / (1000 * 60 * 60 * 24));
  
  return {
    total,
    days,
    hours,
    minutes,
    seconds
  };
}
	
function initializeClock(id, endtime) {
  const clock = document.getElementById(id);
  const daysSpan = clock.style.display = 'block';
  const hoursSpan = clock.style.display = 'block';
  const minutesSpan = clock.querySelector('.minutes');
  const secondsSpan = clock.querySelector('.seconds');
	
  function updateClock() {
    const t = getTimeRemaining(endtime);
    minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
    secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

    if (t.total <= 0) {
      clearInterval(timeinterval);
    }
  }

  updateClock();
  const timeinterval = setInterval(updateClock, 1000);
}

const timeInMinutes = 10;
const currentTime = Date.parse(new Date());
const deadline = new Date(currentTime + timeInMinutes*60*1000);
if (new Date(deadline) > new Date()) {
  initializeClock('clockdiv', deadline)
}
</script>
Bài viết này được đăng trong Worpress và được gắn thẻ .
Tags :
Tags: