Contents hide 1) Why Use Countdown ? 2) Countdown UI 3) On Window Load 4) Update Timer Function 5) Start Timer Function 6) Countdown Styling In this tutorial we will see how to create the Custom Countdown For Coming Soon Page Using JavaScript HTML And CSS. Check out the demo on how to Create the Custom Countdown For Comming Soon Page Using JavaScript. Demo Why Use Countdown ? If you are planning for your project, and the first thing you decide is the name of the project. So if you buy a domain of a project name and the project is still pending then you set this template for temperory to anounce your project after some time by using countdown. Letβs us begain to build our custome countdown. we will be using just simple HTML5 CSS3 and the basic JavaScript to build a count down timer. Countdown UI index.html <body> <div id="del-countdown"> <h1>EVENT COUNTDOWN</h1> <div id="clock"></div> <div id="units"> <span>Days</span> <span>Hours</span> <span>Minutes</span> <span>Seconds</span> </div> </div> </body> By assigning a id to a single div element i.e id="clock" we will create some function that will build the countdown. On Window Load countdown.js window.onload = function(){ // invoke function on window load var deadline = new Date("June 30, 2017 17:15:00"); // deadline - end time of countdown startTimer("clock", deadline); }; Letβs start with the beginning, So on window load, we will call a function in that function we will set a variable named as a deadline, this variable will be containing the end time of countdown. and in that we will call an another function named as start time which does not define yet, it has two parameters one contain the clock which is the id that we will be injecting and another is our deadline. Update Timer Function countdown.js function updateTimer(deadline){ var time = deadline - new Date(); //gives the date and time of the instance return { 'days': Math.floor( time/(1000*60*60*24) ), 'hours': Math.floor( (time/(1000*60*60)) % 24 ), 'minutes': Math.floor( (time/1000/60) % 60 ), 'seconds': Math.floor( (time/1000) % 60 ), 'total' : time }; }; From this function we will get the current date and time, and also we will return the object as it contains the math.floor method so it will not show the decimal(float) value instade of it, it will display the integer value. So while returning the function it will get the currnt time and it will divide by 1000(seconds), 60(minutes), 60(Hours) and 24(Hours a day) Start Timer Function countdown.js function startTimer(id, deadline){ var timerInterval = setInterval(function(){ var clock = document.getElementById(id); var timer = updateTimer(deadline); clock.innerHTML = '' + timer.days + '' + '' + timer.hours + '' + '' + timer.minutes + '' + '' + timer.seconds + ''; //animations var spans = clock.getElementsByTagName("span"); animateClock(spans[3]); if(timer.seconds == 59) animateClock(spans[2]); if(timer.minutes == 59 && timer.seconds == 59) animateClock(spans[1]); if(timer.hours == 23 && timer.minutes == 59 && timer.seconds == 59) animateClock(spans[0]); //check for end of timer if(timer.total < 1){ //if time < 1 Set to '0:0:0' clearInterval(timerInterval); clock.innerHTML = '0000'; } }, 1000); } // removes and add thr turn class to animate function animateClock(span){ span.className = "turn"; setTimeout(function(){ span.className = ""; },700); } At the end of the function we have set the time, so every second it will fire the whole function. In that function we have set getElementById(id) which is pass through the clock, that we declared on window load, and also we create the variable update timer which will invoke the another function, so the updateTimer properties are stored in this variable. When the countdown ends the βifβ¦elseβ statement will set the to zero instead of going negative value. Countdown Styling We will add some css to beautiy our countdown page using some animation with its axis and giving some background images, width to make it fancy. style.css #geeks-countdown{ width: 850px; margin: 10% auto; } #clock span{ float: left; text-align: center; font-size: 84px; margin: 0 2.5%; color: #fff; padding: 20px; width: 20%; border-radius: 20px; box-sizing: border-box; } #clock:after{ content: ""; display: block; clear: both; } #units span{ float: left; width: 25%; text-align: center; margin-top: 30px; color: #ddd; text-transform: uppercase; font-size: 13px; letter-spacing: 2px; } span.turn{ animation: turn 1s ease forwards; } @keyframes turn{ 0%{transform: rotateY(360deg)} 100%{transform: rotateY(0deg)} } Get SVG background From HERE ! Share this:TwitterFacebookRedditLinkedInWhatsAppPrintTumblr Related Tags: countdown, css3, html5, JavaScript