Contador de dias para Black Friday em Javascript e CSS

Na Black Friday é um período criado pelos lojistas para aquecer o comercio e conseguir mais vendas. Para as lojas virtuais é um período de muita customização  nos layouts e criação de dezenas de banners e artes variadas.

Muitas estratégias são usadas neste período, os gatilhos mentais e frases de efeito são uma das preferidas dos lojistas.  O gatilho mental de Escassez e Urgência são os melhores e mais usados nos site. Por isso vou explicar neste post um modo fácil de ativar este gatilho metal nas pessoas e conseguir fazer mais vendas.

Vamos montar um contador de tempo, um temporizador, para criar urgência nas compras. Esta estratégia é muito usada no período de Black Friday.

Primeiro, a estrutura de Html:

<!-- Countdown start -->
<div id="countdown_dashboard">
  
  <div class="dashp">
    <span class="dashtitle">Dias</span>
    <p id="days"></p>
  </div>

  <div class="dashp">
    <span class="dashtitle">Horas</span>
    <p id="hours"></p>
  </div>

  <div class="dashp">
    <span class="dashtitle">Minutos</span>
    <p id="minutes"></p>
  </div>

  <div class="dashp">
    <span class="dashtitle">Segundos</span>
    <p id="seconds"></p>
  </div>

</div>
<!-- Countdown end -->

Agora nosso CSS

<style> 
  
#countdown_dashboard .dashp { border:1px solid #9e9e9e; float:left; margin: 0 10px 0 0; width:80px; height: 60px; padding:10px;  border-radius: 15px; }
#countdown_dashboard p { font-size:40px; font-weight:bold; color:#4EAEE0; margin: 0px; text-align: center; }
#countdown_dashboard .dashtitle { font-size:11px; color:#ccc; clear:both; display:block; }

</style>

O cara que faz  a mágica acontecer, Javascript:

<script type="text/javascript">

  function countdown(){
    var now = new Date();
                // Altere a data do seu evento aqui
    var eventDate = new Date("Nov 24, 2040 00:00:00");

    var currentTiime = now.getTime();
    var eventTime = eventDate.getTime();

    var remTime = eventTime - currentTiime;

    // calculando o dia, hora, minuto e segundo
      var d = Math.floor(remTime / (1000 * 60 * 60 * 24));
      var h = Math.floor((remTime % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
      var m = Math.floor((remTime % (1000 * 60 * 60)) / (1000 * 60));
      var s = Math.floor((remTime % (1000 * 60)) / 1000);

    document.getElementById("days").textContent = d;
    document.getElementById("days").innerText = d;
    document.getElementById("hours").textContent = h;
    document.getElementById("minutes").textContent = m;
    document.getElementById("seconds").textContent = s;

    setTimeout(countdown, 1000);
    
    // Verifica se acabou o período do evento
     if (remTime < 0) {
      clearInterval(countdown);
      //document.getElementById("demogrande").innerHTML = "FIM";
      document.getElementById("days").innerHTML = " ";
      document.getElementById("hours").innerHTML = " ";
      document.getElementById("minutes").innerHTML = " ";
      document.getElementById("seconds").innerHTML = "<small>FIM</small>"; 
      } 
  }

  countdown();
</script>

Espero que tenha ajudado a criar novos elementos visuais para a loja ou site. Até a próxima!

Baixar o Arquivo