#12765

<marquee>
<div>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>
</marquee>
<script>
var s = document.querySelectorAll('marquee div span');
var oneDay = 24 * 60 * 60 * 1000;
var firstDate = new Date("13 October 2024 6:00 UTC");var secondDate = new Date();
var days = (firstDate.getTime() - secondDate.getTime()) / (oneDay);
var hrs = (days - Math.floor(days)) * 24;
var min = (hrs - Math.floor(hrs)) * 60;
s[0].innerHTML = Math.floor(days);
s[1].innerHTML = Math.floor(hrs);
s[2].innerHTML = Math.floor(min);
s[3].innerHTML = Math.floor((min - Math.floor(min)) * 60);
var i = setInterval(function() {n()}, 1000)
function f(d, x) {s[d].innerHTML = x;s[d - 1].innerHTML = Number(s[d - 1].innerHTML) - 1;}
function n() {s[3].innerHTML = Number(s[3].innerHTML) - 1;
if (s[3].innerHTML == -1) {f(3, 59)
if (s[2].innerHTML == -1) {f(2, 59)
if (s[1].innerHTML == -1) {f(1, 23)
}}}if(s[0].innerHTML <= -1) {clearInterval(i);document.getElementsByTagName('div')[0].innerHTML='<h2>The event is over.</h2>'}}</script>
<style>
  marquee span {
  font-size: 5vw;
  color: #fff;
  margin: 0 1vw;
  padding: 2.1vw 2.1vw;
  display: inline-block;
  width: 8vw;
  border-radius: 10px;
  text-align: center;
  background: rgba(0, 0, 0, .8);
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.5);
}
marquee span:nth-of-type(1):after {
  content: "days";
}
marquee span:nth-of-type(1):after {
  content: "days";
}
marquee span:nth-of-type(2):after {
  content: "hrs";
}
marquee span:nth-of-type(3):after {
  content: "min";
}
marquee span:nth-of-type(4):after {
  content: "sec";
}
  </style>