Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

170
Views
How can I add a countdown on my website with javascript?

So I wanted to add a countdown to my website. This is what I have so far. The problem is that is doesn't show the javascript coding to the html. Maybe there is a problem in the javascript coding because I dont think that it has sm to do with the html file.

    const countdown = () => {
      const countDate = new Date("November 7, 2021 00:00:00").getTime();
      const now = new Date().getTime();
      const gap = countDate - now;
    
      const second = 1000;
      const minute = second * 60;
      const hour = minute * 60;
      const day = hour * 24;
    
      const textDay = Math.floor(gap / day);
      const textHour = Math.floor((gap % day) / hour);
      const textMinute = Math.floor((gap % hour) / minute);
      const textSecond = Math.floor((gap % minute) / second);
    
    
           document.querySelector('.day').innerText = textDay;
           document.querySelector('.hour').innerText = textHour;
           document.querySelector('.minute').innerText = textMinute;
           document.querySelector('.second').innerText = textSecond;
    };
    
    setInterval(countdown, 1000);
   <section class="coming-soon">
              <div>
                <h3>Bis zum EMS...</h3>
                <div class="countdown">
                  <div class="container-day">
                    <h4 class="day">Time</h4>
                    <h4>Day</h4>
                  </div>
                  <div class="container-hour">
                    <h4 class="hour">Time</h4>
                    <h4>Hour</h4>
                  </div>
                  <div class="container-minute">
                    <h4 class="minute">Time</h4>
                    <h4>Minute</h4>
                  </div>
                  <div class="container-second">
                    <h4 class="second">Time</h4>
                    <h4>Second</h4>
                  </div>
                </div>
              </div>
            </section>

it doesnt work but I haven't figured out why. Can sm help?

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Here's a sample pulled from what I use on a site. It uses jQuery, moment js, moment timezone, and moment timezone with data. https://jsfiddle.net/mdzLhvqw/1/

<div class="timer"></div>
<script>
$(function(){
  let end=moment("2021-11-07T00:00:00").tz('America/New_York');
  let timer=setInterval(function(){
    let now=moment().tz('America/New_York');
    let diff=moment.duration(end.diff(now));
    let days=diff.get("days")<1?'':(diff.get("days")>1?diff.get("days")+'days ':diff.get("days")+"day ");
    let hr=diff.get("hours")<2?diff.get("hours")+'hr ':diff.get("hours")+'hrs ';
    let mn=diff.get("minutes")<2?diff.get("minutes")+"min ":diff.get("minutes")+"mins ";
    let sec=diff.get("seconds")<2?diff.get("seconds")+"sec":diff.get("seconds")+"secs";
    $(".timer").text(days+hr+mn+sec);
    if(now>=end){
      clearInterval(timer);
    }
  },1000);
});
</script>
about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!