Temporizador de contagem regressiva JavaScript

Resumo : neste tutorial, você aprenderá como desenvolver um cronômetro de contagem regressiva JavaScript reutilizável.

O que é um cronômetro de contagem regressiva

Um cronômetro de contagem regressiva é um relógio virtual executado em uma página de destino. E faz uma contagem regressiva a partir de uma determinada data para indicar o início (ou o fim) de um evento.

Em sites de comércio eletrônico, você pode usar uma contagem regressiva para exibir o início (ou o fim) de uma oferta. O objetivo da contagem regressiva é incentivar os clientes a realizar ações como comprar produtos ou serviços.

Neste tutorial, você aprenderá como criar um cronômetro de contagem regressiva em JavaScript do zero. E você aprenderá como usá-lo para construir um cronômetro de contagem regressiva para o Ano Novo.

A seguir mostramos a página inicial da contagem regressiva final do Ano Novo .

Observe que o cronômetro de contagem regressiva que você criará é reutilizável, portanto, você pode usá-lo em qualquer página de destino. Além disso, você pode usar essa contagem regressiva para criar vários cronômetros de contagem regressiva em uma única página.

Crie a estrutura do projeto

Primeiro, crie uma pasta de projeto chamada countdown-timer. Dentro dessa pasta, crie três subpastas: js, csse imgque armazenarão os arquivos JavaScript, CSS e de imagem.

Em segundo lugar, crie na style.csspasta css, app.jse countdown.jsarquivos na jspasta, e index.htmlna countdown-timerpasta:

Terceiro, baixe esta imagem de fogos de artifício e copie-a para a imgpasta. Você usará esta imagem como plano de fundo da página de contagem regressiva do Ano Novo.

A estrutura do projeto ficará assim:

Crie a página HTML

A página HTML é bastante simples porque você gerará a maior parte do código HTML a partir de JavaScript.

O seguinte mostra a página HTML completa:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Countdown Timer - New Year Countdown</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <h1>New Year Countdown</h1>
    <div class="countdown-timer"></div>
    <div class="message"></div>
    <div class="year"></div>

    <script src="js/countdown.js"></script>
    <script src="js/app.js"></script>

</body>
</html>Linguagem de código:  HTML, XML  ( xml )

No index.htmlarquivo, você coloca um link para o style.cssarquivo na <head>seção e para os arquivos countdown.jse app.jsna <body>seção.

Observe que o countdown.jsarquivo deve aparecer antes do app.jsarquivo porque app.jsusará os objetos do countdown.jsarquivo.

A <body>seção tem quatro elementos:

  • Um título 1 ( <h1>) . Este elemento mostrará um título. Pode ser qualquer coisa que descreva a contagem regressiva, por exemplo, Contagem regressiva de Ano Novo.
  • A <div>com a turma countdown-timer. Este elemento exibirá a contagem regressiva.
  • A <div>com a messageturma. Este elemento exibirá a mensagem quando a contagem regressiva for concluída.
  • E um <div>com a yearturma. Este elemento mostrará o Ano Novo, por exemplo, 2021.

Uma rápida visão geral do objeto Date

Para criar o cronômetro, você precisará trabalhar com o Dateobjeto, que está disponível em todos os navegadores da web.

O Dateobjeto representa um único momento no tempo. Ele contém um número que representa os milissegundos desde 1º de janeiro de 1970 UTC.

A seguir mostramos como criar um novo Dateobjeto que representa a data e hora atuais:

const now = new Date();Linguagem de código:  JavaScript  ( javascript )

E este exemplo mostra como chamar o getTime()método do Dateobjeto para obter o número de milissegundos desde January 1, 1970 00:00:00 UTC:

const time = now.getTime();
console.log(time);Linguagem de código:  JavaScript  ( javascript )

Para criar um novo Dateobjeto com data e hora especificadas, você pode passar uma string de data para o Date()construtor assim:

const d = new Date('February 02, 2020 01:02:03');
console.log(d.getTime()); // 1580580123000Linguagem de código:  JavaScript  ( javascript )

Para calcular o número de milissegundos entre dois tempos, você chama o getTime()método e usa o -operador. Por exemplo:

const d1 = new Date('September 17, 2020 00:00:00');
const d2 = new Date('September 19, 2020 01:00:00');

const time = d2.getTime() - d1.getTime();
console.log(time); // 176400000Linguagem de código:  JavaScript  ( javascript )

Calcule o tempo restante

O cronômetro de contagem regressiva precisará calcular os dias, horas, minutos e segundos restantes a partir de vários milissegundos e exibir essas informações em uma página da web.

A seguir, declaramos uma variável de tempo com o valor 150.000 milissegundos:

const time = 150000; // msLinguagem de código:  JavaScript  ( javascript )

Para converter milissegundos em minutos, você divide os milissegundos por 1000 para obter os segundos e divide os segundos por 60 para obter os minutos. Por exemplo:

console.log(time / 1000 / 60); Linguagem de código:  JavaScript  ( javascript )

Saída:

2.5Linguagem de código:  CSS  ( css )

Para obter os minutos restantes (2), você usa a Math.floor()função:

const minutes = Math.floor(time / 1000 / 60);
console.log(minutes); // 2Linguagem de código:  JavaScript  ( javascript )

Para obter os segundos restantes (30), você usa o operador de módulo ( % ) que retorna o resto da divisão:

const seconds = Math.floor(time / 1000) % 60;
console.log(seconds); // 30Linguagem de código:  JavaScript  ( javascript )

Desenvolva a classe CountDown

Primeiro, crie uma nova CountDownclasse no countdown.jsarquivo:

class CountDown {
}Linguagem de código:  JavaScript  ( javascript )

A CountDownclasse deve ser inicializada com três argumentos:

  • uma data expirada.
  • um retorno de chamada responsável por renderizar o cronômetro de contagem regressiva.
  • e outro retorno de chamada que será chamado quando a contagem regressiva terminar.

O construtor da CountDownclasse ficará assim:

class CountDown {
    constructor(expiredDate, onRender, onComplete) {
        this.onRender = onRender;
        this.onComplete = onComplete;
        // handle the expired Date
        ..
    }
}Linguagem de código:  JavaScript  ( javascript )

Com base no expiredDateargumento, você pode calcular o tempo restante em milissegundos:

const currentTime = new Date().getTime();
const timeRemaining = expiredDate.getTime() - currentTime;Linguagem de código:  JavaScript  ( javascript )

Como você precisará acessar o tempo restante ( timeRemaining) nos métodos da classe, você deve defini-lo como uma propriedade da CountDownclasse.

O método setExpiredDate()

O seguinte define um novo método chamado setExpiredDate()que inicializa a timeRemainingpropriedade:

 setExpiredDate(expiredDate) {
    // get the current time
    const currentTime = new Date().getTime();
    // calculate the remaining time 
    this.timeRemaining = expiredDate.getTime() - currentTime;
}Linguagem de código:  JavaScript  ( javascript )

Se timeRemainingfor maior que zero, o setExpiredDate()método executará o start()método para iniciar o cronômetro. Caso contrário, ele executará o complete()método.

Ficará setExpiredDate()assim:

setExpiredDate(expiredDate) {
    // get the current time
    const currentTime = new Date().getTime();

    // calculate the remaining time 
    this.timeRemaining = expiredDate.getTime() - currentTime;

    // should the countdown completes or start
    this.timeRemaining > 0 ?
        this.start() :
        this.complete();
}Linguagem de código:  JavaScript  ( javascript )

Observe que usamos o operador ternário ?: para executar o método complete()ou start()com base no valor da this.timeRemainingpropriedade.

O método complete()

O complete()método verifica se o onCompleteretorno de chamada foi passado e o invoca. Se onCompletenão estiver disponível, complete()não fará nada.

complete() {
    if (typeof this.onComplete === 'function') {
        onComplete();
    }
}Linguagem de código:  JavaScript  ( javascript )

método start()

O start()método reduz a timeRemainingpropriedade a cada segundo (1000 ms).

Se o tempo restante for menor que zero, o start()método irá:

  • Primeiro, chame o complete()método.
  • Em segundo lugar, limpe o cronômetro usando a clearInterval()função.
start() {
    //  setup a timer
    const intervalId = setInterval(() => {
        // update the timer  
        this.timeRemaining -= 1000;

        if (this.timeRemaining < 0) {
            // call the callback
            complete();

            // clear the interval if expired
            clearInterval(intervalId);
        }

    }, 1000);
}Linguagem de código:  JavaScript  ( javascript )

Caso o tempo restante seja maior que zero, o start()método deverá chamar um método que execute o onRendercallback.

O método getTime()

O getTime()método a seguir retorna um objeto que contém os dias, horas, minutos e segundos restantes com base na timeRemainingpropriedade.

  getTime() {
    return {
        days: Math.floor(this.timeRemaining / 1000 / 60 / 60 / 24),
        hours: Math.floor(this.timeRemaining / 1000 / 60 / 60) % 24,
        minutes: Math.floor(this.timeRemaining / 1000 / 60) % 60,
        seconds: Math.floor(this.timeRemaining / 1000) % 60
    };
}Linguagem de código:  JavaScript  ( javascript )

O método update()

O seguinte define o update()método que chama o onRender()retorno de chamada com o objeto de tempo restante atual retornado pelo getTime()método:

update() {
    if (typeof this.onRender === 'function') {
        this.onRender(this.getTime());
    }
}Linguagem de código:  JavaScript  ( javascript )

O start()método chamará o update()método no início e a cada segundo depois disso:

start() {
    // update the countdown
    this.update();

    //  setup a timer
    const intervalId = setInterval(() => {
        // update the timer  
        this.timeRemaining -= 1000;

        if (this.timeRemaining < 0) {
            // call the callback
            complete();

            // clear the interval if expired
            clearInterval(intervalId);
        } else {
            this.update();
        }

    }, 1000);
}Linguagem de código:  JavaScript  ( javascript )

O seguinte mostra a CountDownclasse completa:

class CountDown {
    constructor(expiredDate, onRender, onComplete) {
        this.setExpiredDate(expiredDate);

        this.onRender = onRender;
        this.onComplete = onComplete;
    }

    setExpiredDate(expiredDate) {
        // get the current time
        const currentTime = new Date().getTime();

        // calculate the remaining time 
        this.timeRemaining = expiredDate.getTime() - currentTime;

        this.timeRemaining <= 0 ?
            this.complete() :
            this.start();
    }


    complete() {
        if (typeof this.onComplete === 'function') {
            onComplete();
        }
    }
    getTime() {
        return {
            days: Math.floor(this.timeRemaining / 1000 / 60 / 60 / 24),
            hours: Math.floor(this.timeRemaining / 1000 / 60 / 60) % 24,
            minutes: Math.floor(this.timeRemaining / 1000 / 60) % 60,
            seconds: Math.floor(this.timeRemaining / 1000) % 60
        };
    }

    update() {
        if (typeof this.onRender === 'function') {
            this.onRender(this.getTime());
        }
    }

    start() {
        // update the countdown
        this.update();

        //  setup a timer
        const intervalId = setInterval(() => {
            // update the timer  
            this.timeRemaining -= 1000;

            if (this.timeRemaining < 0) {
                // call the callback
                complete();

                // clear the interval if expired
                clearInterval(intervalId);
            } else {
                this.update();
            }

        }, 1000);
    }
}Linguagem de código:  JavaScript  ( javascript )

Construa a contagem regressiva do Ano Novo

Primeiro, crie uma nova função chamada getNewYear()método que retorna o Ano Novo:

const getNewYear = () => {
    const currentYear = new Date().getFullYear();
    return new Date(`January 01 ${currentYear + 1} 00:00:00`);
};Linguagem de código:  JavaScript  ( javascript )

Segundo, selecione e atualize o .yearelemento. Ele mostrará um número do ano de quatro dígitos do Ano Novo, por exemplo, 2021:

// update the year element
const year = document.querySelector('.year');
year.innerHTML = getNewYear().getFullYear();Linguagem de código:  JavaScript  ( javascript )

Terceiro, selecione os elementos .countdown-timere :.messageh1

// select elements
const app = document.querySelector('.countdown-timer');
const message = document.querySelector('.message');
const heading = document.querySelector('h1');Linguagem de código:  JavaScript  ( javascript )

Quarto, defina uma função de formato que preencha um número com se '0'o número for menor que 10. Por exemplo, 5 será 05. Mas 10 permanecerão os mesmos.

const format = (t) => {
    return t < 10 ? '0' + t : t;
};Linguagem de código:  JavaScript  ( javascript )

Quinto, defina um render()método que componha a marcação HTML a partir do objeto de tempo e atualize-o no .countdown-timerelemento. Ele mostrará os dias, horas, minutos e segundos restantes.


const render = (time) => {
    app.innerHTML = `
        <div class="count-down">
            <div class="timer">
                <h2 class="days">${format(time.days)}</h2>
                <small>Days</small>
            </div>
            <div class="timer">
                <h2 class="hours">${format(time.hours)}</h2>
                <small>Hours</small>
            </div>
            <div class="timer">
                <h2 class="minutes">${format(time.minutes)}</h2>
                <small>Minutes</small>
            </div>
            <div class="timer">
                <h2 class="seconds">${format(time.seconds)}</h2>
                <small>Seconds</small>
            </div>
        </div>
        `;
};
Linguagem de código:  HTML, XML  ( xml )

Quinto, quando a contagem regressiva termina, ela mostra uma mensagem, por exemplo, "Happy New Year".

A showMessage()função a seguir exibe a Happy New Yearmensagem. Além disso, limpa o conteúdo do .countdown-timerelemento e oculta o elemento de título:

const showMessage = () => {
    message.innerHTML = `Happy New Year ${newYear}!`;
    app.innerHTML = '';
    heading.style.display = 'none';
};Linguagem de código:  JavaScript  ( javascript )

Sexto, a contagem regressiva do Ano Novo deve mostrar a mensagem de saudação de Feliz Ano Novo por um período de tempo e, em seguida, exibir novamente a contagem regressiva do Ano Novo.

O seguinte define uma função que oculta a mensagem de saudação e mostra o elemento de título:

const hideMessage = () => {
    message.innerHTML = '';
    heading.style.display = 'block';
}Linguagem de código:  JavaScript  ( javascript )

Sétimo, defina uma complete()função que mostre a mensagem por um período de tempo e depois a oculte. Além disso, define expiredDatepara o Ano Novo:

const complete = () => {
    showMessage();
    // restart the countdown after showing the 
    // greeting message for a day ()
    setTimeout(() => {
        hideMessage();
        countdownTimer.setExpiredDate(getNewYear());
    }, 1000 * 60 * 24);
};Linguagem de código:  JavaScript  ( javascript )

Por fim, crie a nova instância e passe a data, função e função CountDowndo Ano Novo para seu construtor:rendercomplete

const countdownTimer = new CountDown(
    getNewYear(),
    render,
    complete
);Linguagem de código:  JavaScript  ( javascript )

A seguir mostra o app.jsarquivo completo:

// Get the new year 
const getNewYear = () => {
    const currentYear = new Date().getFullYear();
    return new Date(`January 01 ${currentYear + 1} 00:00:00`);
};

// update the year element
const year = document.querySelector('.year');
year.innerHTML = getNewYear().getFullYear();

// select elements
const app = document.querySelector('.countdown-timer');
const message = document.querySelector('.message');
const heading = document.querySelector('h1');


const format = (t) => {
    return t < 10 ? '0' + t : t;
};

const render = (time) => {
    app.innerHTML = `
        <div class="count-down">
            <div class="timer">
                <h2 class="days">${format(time.days)}</h2>
                <small>Days</small>
            </div>
            <div class="timer">
                <h2 class="hours">${format(time.hours)}</h2>
                <small>Hours</small>
            </div>
            <div class="timer">
                <h2 class="minutes">${format(time.minutes)}</h2>
                <small>Minutes</small>
            </div>
            <div class="timer">
                <h2 class="seconds">${format(time.seconds)}</h2>
                <small>Seconds</small>
            </div>
        </div>
        `;
};


const showMessage = () => {
    message.innerHTML = `Happy New Year ${newYear}!`;
    app.innerHTML = '';
    heading.style.display = 'none';
};

const hideMessage = () => {
    message.innerHTML = '';
    heading.style.display = 'block';
};

const complete = () => {
    showMessage();

    // restart the countdown after showing the 
    // greeting message for a day ()
    setTimeout(() => {
        hideMessage();
        countdownTimer.setExpiredDate(getNewYear());
    }, 1000 * 60 * 60 * 24);
};

const countdownTimer = new CountDown(
    getNewYear(),
    render,
    complete
);Linguagem de código:  JavaScript  ( javascript )

Se você abrir o index.html, verá que a contagem regressiva do Ano Novo está em andamento.

Resumo

Neste tutorial, você aprendeu como:

  • Use a classe ES6 para definir um componente reutilizável de cronômetro de contagem regressiva.
  • Use o Dateobjeto para manipular o tempo.
  • Use setInterval() e clearInterval() para criar e cancelar uma ação de repetição cronometrada.
Validação de formulário Javascript
Anterior
Validação de formulário Javascript

Próximo
Rolagem infinita de JavaScript

Rolagem infinita de JavaScript

Deixe um comentário

O seu endereço de email não será publicado. Campos obrigatórios marcados com *