Visão geral

Em alguns casos, pode ser necessário exibir um cronômetro de contagem regressiva para o lançamento de um projeto, uma oferta especial, anúncios em banner etc. Este artigo explicará como criar um cronômetro de contagem regressiva com um componente HTML.

Creating a Countdown Timer

• Ao usar a extensão do Chrome, quer você escolha um Guia ou um Hotspot, clique no "+" icon para adicionar um componente.
• Escolha a opção HTML.

.

• Insira o seguinte código de modelo de cronômetro de contagem regressiva.

<h3 style="display:flex;justify-content:center"id="ug-yearlydc-countdown"> -h -m -s</h3>
<script>
(function () {
var lsTimerStartedAt = localStorage.getItem("ugyearlydctimer");
var timerStartedAt = lsTimerStartedAt
? new Date(parseInt(lsTimerStartedAt, 10))
: new Date();
localStorage.setItem(
"ugyearlydctimer",
timerStartedAt.getTime().toString()
);
var endDate = new Date(2021, 10, 1, 12, 0, 0)
// Update the count down every 1 second
var x = setInterval(function () {
// Get today's date and time
var now = new Date().getTime();
// Find the distance between now and the count down date
var distance = endDate - now;
var hours = Math.floor(
(distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)
);
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
var seconds = Math.floor((distance % (1000 * 60)) / 1000);
// Display the result in the element with id="demo"
document.getElementById("ug-yearlydc-countdown").textContent =
hours + "h " + minutes + "m " + seconds + "s ";
// If the count down is finished, write some text
if (distance < 0) {
clearInterval(x);
document.getElementById("ug-yearlydc-countdown").innerHTML = "EXPIRED";
}
}, 1000);
})();
</script>

• Encontre essa linha específica no código e altere a data de término como desejar, neste formato: Ano, Mês, Dia, Hora, Minuto, Segundo

var endDate = new Date(2021, 10, 1, 12, 0, 0)

• Clique em Save.
• Clique em Publish Changes do painel.

E o resultado final deve ser o seguinte:
​