JavaScript Reverse Countdown Timer


index.php


     

<!DOCTYPE html>

<html lang="en-US">

<head>

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

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

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title> JavaScript Reverse Countdown Timer  </title>

    <link rel="icon" type="image/png" href="" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <!------ Include the above in your HEAD tag ---------->

   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" />

<style>

 h1{ font-size:52px; font-weight:900; font-family:Verdana, Geneva, sans-serif;  }

</style>

</head>

<body class="body_page" style="margin-top:10px; margin-bottom:10px;">

<div class="container-fluid">

 <div class="row">

   <div id="">

     <p></p>

   </div>

   <div class="col-sm-12 col-lg-12">

      <center>

        <h1 id="demo"></h1>

      </center>

   </div>

 </div>

</div>

<script>

var countDownDate = new Date("Jan 1, 2019 00:00:00").getTime();

var x = setInterval(function() {

  var now = new Date().getTime();

  var distance = countDownDate - now;

  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);

  // Display the result in the element with id="demo"

  document.getElementById("demo").innerHTML = days + " days :" + hours + " hour :"

  + minutes + " min. :" + seconds + " sec.";

  if (distance < 0) {

    clearInterval(x);

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

  }

}, 1000);

</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>