Home About Contact

Projects

Create Messenger Pop Up ChatBox Type Writer ChatGpt Basic Copy Text Using Tolltip Digital Clock CountDown Timer Create StopWatch FB login from Tab Button Accordion Auto Image Gallery DropDown Menu Modal Box Modal Image Box Scroll Indicator To Do List Autocomplete Remember Search History Toggle Switch Calender Layout Dynamic Calender Alarm Set Password Validation Password Generator Age Calculator Multi Step Form Weather API

😍Create A CountDown Timer Like Happy New Year!!😘

Note: If you are a beginner, first you have to know How to create a digital clock ⌚
  • Find beginner's guide on how to create a digital clock
  • Math.floor() function in JS
  • For design purposes, you need to add some CSS.
  • Know More

Start CountDown(11 dec, 2027, 11:59:59) PM

HTML


<h2>Start CountDown(11 dec, 2027, 11:59:59) PM</h2>

<p id="countdown"></p>

JavaScript


clockfun();
function clockfun(){
    let presenttime=new Date().getTime();

    let settime=new Date(2027,11,31,23,59,59).getTime();
    
    let epic=settime-presenttime;


    let day=Math.floor(epic/(86400*1000));
    let hour=Math.floor((epic%(86400*1000))/(3600*1000));


    let minite=Math.floor((epic%(3600*1000))/(60*1000));

    let sec=Math.floor((epic%(60*1000))/(1000));


    document.getElementById("countdown").innerHTML=day+"d "+hour+"h "+minite+"m "+sec+"s";

    
}
setInterval(clockfun,1000);

You can use alternative JS


We can use setTimeout(clockfun, 1000) instead of setInterval(clockfun, 1000) inside the clockfun() function.

CSS


#countdown{
    background-color:dodgerblue;
    display: flex;
    align-items: center;
    color: white;
    border-radius: 8px;
    justify-content: center;
    padding: 15px 10px;
    font-size: 50px;
    font-family: monospace;
    font-weight: bold;
}

Math.floor() Method

  • The Math.floor() method in JS is used to round a number down to the nearest integer.

setInterval()

  • This method in JS repeatedly calls a function or executes a code with a fixed time delay between each call.

setTimeout()

  • This method is used to execute a function or code snippet after a specified delay in milliseconds.

date.get....()

  • getDate(): Returns the day of the month(1-31)
  • getMonth(): Returns the month(0-11)
  • getFullYear(): Returns the year(4 digit year)
  • getDay(): Returns the day of the week(0-6)
  • getHours(): Returns the hours(0-23)
  • getMinutes(): Returns the minites(0-59)
  • getSeconds(): Returns the seconds(0-59)
  • getMilliseconds(): Returns the milliseconds(0-999)
  • getTime(): Returns the number of milliseconds since January 1, 1970, 00:00:00 UTC