Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

173
Visualizações
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 Respostas
Responde à pergunta

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda