Tuesday, June 4, 2024

HTML program for countdown timer

 <!DOCTYPE HTML>

<html>

<head>

<meta name="viewport" content="width=device-width, initial-scale=1">

<style>

p {

  text-align: center;

  font-size: 60px;

  margin-top: 0px;

}

</style>

</head>

<body>


<p id="demo"></p>


<script>

// Set the date we're counting down to

var countDownDate = new Date("Jan 5, 2030 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("demo").innerHTML = days + "d " + hours + "h "

  + minutes + "m " + seconds + "s ";

    

  // If the count down is over, write some text 

  if (distance < 0) {

    clearInterval(x);

    document.getElementById("demo").innerHTML = "EXPIRED"

;

  }

}, 1000);

</script>


</body>

</html>

No comments:

Post a Comment

  Blog chatgpt Blog