JS Countdown
Examples
Start Date
Countdown
HTML
<div class="pt-3"> <div class="container h-100"> <div class="row"> <div class="col-xl-6"> <i class="fal fa-calendar-alt"></i> Start Date </div> <div class="col-xl-6"> <i class="fal fa-alarm-clock"></i> Countdown </div> </div> <hr> <div class="row align-items-center h-100"> <div class="col-xl-6"> <label>Start Date Format <em>06-04-2018 10:00</em></label> <input id="startDate" class="form-control" type="text" placeholder="Enter Start Date"/> <button id="startCountdown" class="btn btn-primary mt-3 float-right">Start</button> </div> <div class="col-xl-6"> <p id="demo"></p> </div> </div> </div> </div>
JS
$("#startCountdown").click(function(){ var startDate = $("#startDate").val(); var countDownDate = new Date(startDate).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); document.getElementById("demo").innerHTML = days + "d " + hours + "h " + minutes + "m " + seconds + "s "; if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); });