CountdownClock.js

Vanilla JS implementation of a countdown clock

								
//Specify date as string...
finish = "Mar 10 2024 08:00:00"; 

//Or Specify date as timestamp...eg: 10seconds from page load 
finish = new Date().getTime() + 10000;

clockConfig = { 
    "id": "countdownclock",
    "finish": "Mar 10 2024 08:00:00", 
    "endcallback": function(){ 
        celebrate(1) 
        setTimeout("celebrate(0)", 2000); 
    },
    "controls": "countdownclock-controls"
}

//start the countdown clock 

		var clock = new CountdownClock(clockConfig).start(); 
//var clock; 




								
 Configure the countdown clock... 
 

								
<script src="./countdown-clock.js"></script>


//Start a second clock...  
finish = new Date().getTime() + 10000;
clockDiv = "simpleclock"; 
simpleClockConfig = { 
    "fields" : [ "dys", "hrs", "min", "sec" ],  //rename the labels 
    "show" : [   "hrs", "min", "sec" ],  //only show these fields  (must match the names you set) 
    "finish": finish, //when is the target date? 10 seconds in the future here. 
    "id": clockDiv, //the ID of the new clock div. 
    "finishAnimation" : false,  //Turn off the wobble animation on success 
    "endcallback": function(){ 
        celebrate(1); 
        setTimeout("celebrate(0)", 1000); 
        document.getElementById(clockDiv).innerHTML = "<h1> TIMES UP! </h1>"; 

    } // how to celebrate 00:00:00:00 
}

var clock2 = new CountdownClock(simpleClockConfig).start();