Timed events are fun and interactive for your users. People love performing in some type of competition, but there are many other reasons to show a JavaScript timer on your website. Regardless of the reasons, I am going to show you how to create a countdown timer using JavaScript and HTML. My primary caution for you is to understand JavaScript handled on the client side and has a dependency on the user’s computer speed. However, countdown timers are still effective for encouraging your users to quickly perform a particular task.
This timer can be used as comming soon page for your website.
This timer is for 8 hours, so when countdown to 0 it again starts to 8 hours. We are using simple Javascript Date function(UTC), some CSS for design.
Below is the javascript used in the counter:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
function timer() { var d=new Date(); var currentTime=d.getUTCHours(); var currentMin=d.getUTCMinutes(); var currentSec=d.getUTCSeconds(); if(currentTime>=0 && currentTime<8) { var flag=parseInt(7)-parseInt(currentTime); var flag1=parseInt(59)-parseInt(currentMin); var flag2=parseInt(59)-parseInt(currentSec); } else if(currentTime>=8 && currentTime<16) { var flag=parseInt(15)-parseInt(currentTime); var flag1=parseInt(59)-parseInt(currentMin); var flag2=parseInt(59)-parseInt(currentSec); } else if(currentTime>=16) { var flag=parseInt(23)-parseInt(currentTime); var flag1=parseInt(59)-parseInt(currentMin); var flag2=parseInt(59)-parseInt(currentSec); } $(".hours").html(("0" + flag).slice(-2)); $(".minutes").html(("0" + flag1).slice(-2)); $(".seconds").html(("0" + flag2).slice(-2)); } setInterval(timer,1000); |
[easy_media_download url=”https://www.tangleskills.com/wp-content/uploads/2017/08/timer.zip”]