Pure Javascript Countdown Timer

Tech Dasher

Hey guys! Countdown timers used for New website launching, Offering Deal or Shopping deadlines in Ecommerce website, Movie release, Shows, online exams and more. Countdown timers can be useful for all online activities. I’ve share the simple countdown timers script using pure JavaScript.

Input format:

var target_date = new Date(2020,6,28,0,0,00).getTime();
//var target_date = new Date(Year,Month,Day,Hour,Minutes,Seconds).getTime();

Year – 2015,2016,2017…
Month – 0,1,2,…,11 (0 – January, 1- February)
Day – 1,2,3,4,…,31
Hour – 0,1,2,3,…,23
Minutes – 0,1,2,3,…,59
Second –  0,1,2,3,…,59

//Html
<h2 id="countdown-timer"></h2>  
//Javascript
<script>
function countdownTimer(seconds){
if(seconds <=0){ 
document.getElementById("countdown-timer").innerHTML='';} 
else{
seconds = seconds -1;
var c_yrs = Math.floor(seconds / (365*60*60*24))+0;
var c_mon = Math.floor((seconds - c_yrs * 365*60*60*24) / (30*60*60*24))+0; 
var c_day = Math.floor((seconds - c_yrs * 365*60*60*24 - c_mon*30*60*60*24)/ (60*60*24))+0;
var c_hrs = Math.floor((seconds - c_yrs * 365*60*60*24 - c_mon*30*60*60*24 - c_day*60*60*24)/ (60*60))+0;
var c_min = Math.floor((seconds - c_yrs * 365*60*60*24 - c_mon*30*60*60*24 - c_day*60*60*24 - c_hrs*60*60)/60)+0;
var c_sec = Math.floor((seconds - c_yrs * 365*60*60*24 - c_mon*30*60*60*24 - c_day*60*60*24 - c_hrs*60*60 - c_min*60))+0;
document.getElementById("countdown-timer").innerHTML= c_yrs + ' year ' + c_mon + ' month ' + c_day + ' day ' + c_hrs + ' hr ' + c_min + ' min ' + c_sec+' sec';
setTimeout("countdownTimer("+seconds+")",999);
}
}
//var target_date = new Date(year,month,day,hour,minutes,seconds).getTime();
var target_date = new Date(2020,6,28,0,0,00).getTime();
var current_date = new Date().getTime(); 
var seconds_left = (target_date - current_date) / 1000;
countdownTimer(seconds_left);     
</script>

Leave a Reply

Top