"Flash Deal Timer"
Bootstrap 4.0.0 Snippet by mjnprojecttesting

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="hours parent_time"> <div>Hours</div> <div class="hours_0 child_time child_time0" ></div> <div class="hours_1 child_time child_time1" ></div> </div> <div class="minutes parent_time"> <div>Mins</div> <div class="minutes_0 child_time child_time0" ></div> <div class="minutes_1 child_time child_time1" ></div> </div> <div class="seconds parent_time"> <div>Secs</div> <div class="seconds_0 child_time child_time0" ></div> <div class="seconds_1 child_time child_time1" ></div> </div> </div> </div>
.container{ margin : 10px; } .parent_time { margin: 0px 5px; } .child_time0{ background : #f39a3f; border-radius: 5px 0px 0px 5px; } .child_time1{ background : #ff7c0c; border-radius: 0px 5px 5px 0px; } .child_time{ float : left; color : #FFF; padding: 6px; margin : 0px; }
// Set the date we're counting down to var countDownDate = new Date(); // add a day countDownDate.setDate(countDownDate.getDate() + 1); // Update the count down every 1 second var x = setInterval(function() { // Get todays date and time var now = new Date().getTime(); // Find the distance between now an 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); if(days>0){ hours = hours + (days*24); days = 0; } hours = zeroPad(hours,2); minutes = zeroPad(minutes,2); seconds = zeroPad(seconds,2); hours = hours.split(''); minutes = minutes.split(''); seconds = seconds.split(''); // Output the result in an element with id="demo" jQuery('.hours_0').html(hours[0]); jQuery('.hours_1').html(hours[1]); jQuery('.minutes_0').html(minutes[0]); jQuery('.minutes_1').html(minutes[1]); jQuery('.seconds_0').html(seconds[0]); jQuery('.seconds_1').html(seconds[1]); // If the count down is over, write some text if (distance < 0) { clearInterval(x); document.getElementById("demo").innerHTML = "EXPIRED"; } }, 1000); function zeroPad(num, places) { var zero = places - num.toString().length + 1; return Array(+(zero > 0 && zero)).join("0") + num; }

Related: See More


Questions / Comments: