Countdown with Javascript

Question

I am a beginner in Javascript and need to create a page with countdown.

I need to pick a future date and count back.

What’s the best way?

Answer 1

I made a similar application in my project to put the page in maintenance in case it is necessary to perform some maintenance.

• For the code to work properly it takes two things: initial and final date.

As you can see in the code below it is necessary to inform the date as new Date(), new date(YEAR, MONTH, DAY, HOUR, MIN, SEC), recalling that the month begins at 0, January = 0, February = 1, March =2 , ...

A brief explanatory, every 0.1s it gives a refresh in the code to update the time, within the code it starts a variable now, responsible for controlling the time travelled and the variable porcentagem which is responsible for keeping the percentage already covered.

dateStart = new Date(2019, 5, 29, 12, 00, 00);
dateEnd = new Date(2019, 5, 29, 14, 00, 0);
var start = dateStart.getTime();
var end = dateEnd.getTime();
var dataFinal = verificaZero(dateEnd.getDate()) + "/" + verificaZero(dateEnd.getMonth() + 1) + "/" + dateEnd.getFullYear();
var horaFinal = " ";
horaFinal += verificaZero(dateEnd.getHours()) + ":" + verificaZero(dateEnd.getMinutes());
var tempoFinal = dataFinal + horaFinal;

function verificaZero(value){
    var result = value < 10 ? "0"+value : value;
    return result;
}

window.setInterval(function() {
  var now = +new Date;
  porcentagem = (now - start) / (end - start) * 100;
  if (porcentagem > 100) {
    porcentagem = "100";
  }
  if (porcentagem <= 0) {
    porcentagem = "0";
  }
  if (porcentagem <= 100 || porcentagem > 0) {
    $("#progress-bar").text(parseInt(porcentagem) + "%");
        if (porcentagem < 100)
            $("#porcent").html("Aguarde, data de retorno: " + tempoFinal);
        
        if (porcentagem == 100)
            $("#porcent").html("Aguarde em instantes estaremos online.");
  }
  $('.progress-bar-container').attr('title', parseInt(porcentagem) + "% Completo.");
  porcentagem = porcentagem + "%";

  document.getElementById("progress-bar").style.width = porcentagem;
}, 100);

.manutencao {
    text-align: center;
    border-radius: 10px;
    opacity:0.8;
    filter:alpha(opacity=80); /* For IE8 and earlier */
}
.manutencao .logo {
    background: radial-gradient(circle, #94D2F8, #3A92C8) repeat scroll 0% 0% transparent;
    border-radius:10px;
    padding:20px;
    box-shadow: inset 2px 2px 10px 0px #222;
}
.manutencao a{color: #77dff1; text-decoration: none;}
@font-face {
    font-weight: normal;
    font-style: normal;
}
.manutencao h1 {
    text-transform: uppercase;
    color: #3c8dbc;
    font-size: 80px;
    font-weight: lighter;
    text-shadow: 0px 2px 0px #000;
    margin: 30px 0 0 0;
}
.manutencao h2 {
    text-transform: uppercase;
    color: #3c8dbc;
    font-size: 24px;
    font-weight: lighter;
    text-shadow: 0px 2px 0px #000;
    margin: 15px 0 15px 20px;
    text-align: left;
}
.manutencao p {
    color: #000;
    margin: 0;
    font-size: 16px;
}
.manutencao p.credit {font-size: 12px; margin-top: 40px; color: #ccc;}
.manutencao .hr {
    display: block;
    border: none;
    width: 100%;
    height: 2px;
    margin: 10px 0;
}
.manutencao .clear {
    clear: both;
}
.manutencao .progress {
    height: 70px;
    margin: 50px 10px 10px 10px;
    background: #222d32;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    position: relative;
    width: auto;
}
.manutencao .txt-launch-day-hat {
    width: 117px;
    height: 159px;
    position: absolute;
    top: -120px;
    right: -45px;
}
.manutencao .txt-launch-day {
    width: 112px;
    height: 110px;
    position: absolute;
    top: -80px;
    right: -40px;
}
.manutencao .progress-bar {
    height: 43px;
    background: #3c8dbc;
    position: absolute;
    top:14px;
    left: 0px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    font-size: 30px;
    align-items: center;
    display: flex;
    justify-content: center;
}
.manutencao .progress-bar-container {
    width: 100%;
    height: 70px;
    
    position: relative;
}
.manutencao .mailing-list h2 {
    width: 400px;
    float: left;
}
.manutencao .mailing-list form {
    display: block;
    width: 450px;
    float: right;
    margin: 5px 0 0 0;
}
.manutencao .mailing-list input[type=text]{
    width:280px;
    height: 16px;
    border: none;
    color: #c9c9c9;
    font-size: 14px;
    padding: 15px 10px;
    margin: 0;
}
.manutencao .mailing-list input[type=submit]{
    width:90px;
    height: 44px;
    border: none;
    text-indent: -5000px;
    cursor: pointer;
    margin: 0 0 0 -10px;
    text-transform: capitalize;
}
.manutencao .mailing-list input[type=submit]:hover{
    background-position: 0 -44px;
}
.manutencao .mailing-list input[type=submit]:active{
    background-position: 0 -88px;
}
.manutencao .mailing-list input[type=text]:focus {
    outline: none;
}
#porcent{
    color: #3c8dbc;
    font-size: 50px;
    font-weight: lighter;
    text-shadow: 0px 2px 0px #000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="content-wrapper">
  <section class="content">
    <div class="row">
      <div class="col-md-12">
        <div class="manutencao">
          <section class="progress">
            <div class="progress-bar-container" title="99% Completo">
              <article id="progress-bar" class="progress-bar"></article>
            </div>
          </section>
          <div id="porcent"></div>
        </div>
      </div>
    </div>
  </section>
</div>