Como colocar uma mensagem de fim em uma contagem regressiva (temporizador) no javascript

Olá pessoal, eu gostaria de colocar uma mensagem de Fim da Contagem Regressiva no meu site, mas quando ele chega a contagem de 00 : 00 : 00 : 00, ele passa a ser negativo ex: 00 : 00 : 00 : -1; e eu quero colocar que chegamos a um fim, mas não sei mexer muito bem em Java Script, alguém poderia me ajudar ?

Vou colocar o código aqui

HTML: div class=“contagem”

table
               tr
                    td
                        div class="numero" id="dia"></div
                  </td
                  <td
                      div class="numero" id="hora"></div
                  </td
                  <td
                      div class="numero" id="minuto"></div
                  </td
                  <td
                      div class="numero" id="segundo"></div
                  </td
                </tr
                <tr style="height:20px"
                    <td
                        div class="legenda">Dias</p
                    /td
                    td
                        p class="legenda">Horas</p
                    </td
                    <td
                        <p class="legenda">Min</p
                    </td
                    <td
                        <p class="legenda">Seg</p
                    </td
                </tr
             </table
        </div

CSS:

.contagem{
    width:18%;
    height:70px;
    position: relative;
    top: 70%;
    left: 5%;
}
.numero{
    min-width: 35px;
    max-width: 80px;
    color: #fff;
    font-size: 2em;
    margin: 5px;
    text-align: center;
    border-radius: 5px;
    padding: 5px;
}
#dia::after{
    content:":";
    position:relative;
    left:58%;
}
#hora::after{
    content:":";
    position:relative;
    left:35%;
}
#minuto::after{
    content:":";
    position:relative;
    left:30%;
}
.legenda{
    height: 25px;
    line-height: 10px;
    font-size:1.6em;
    margin-left: 8px;
    text-align: center;
    color: #fff;
    text-transform: uppercase;
}

JavaScript

var target_date = new Date("june 05, 2017 24:00").getTime();
var dias, horas, minutos, segundos;
var regressiva = document.getElementById("regressiva");

setInterval(function () {

    var current_date = new Date().getTime();
    var segundos_f = (target_date - current_date) / 1000;

dias = parseInt(segundos_f / 86400);
    segundos_f = segundos_f % 86400;
    
    horas = parseInt(segundos_f / 3600);
    segundos_f = segundos_f % 3600;
    
    minutos = parseInt(segundos_f / 60);
    segundos = parseInt(segundos_f % 60);
    
document.getElementById('dia').innerHTML = dias;
document.getElementById('hora').innerHTML = horas;
document.getElementById('minuto').innerHTML = minutos;
document.getElementById('segundo').innerHTML = segundos;
}, 1000);

E eu quero que quando chegar a 00 : 00 : 00 : 00, ele não se torne negativo como mostrado encima, e ao invés disso quando chegar a zero, ter uma mensagem dizendo que chegou ao fim.

Coloquei assim o html porque não estava mostrando o código

4 Respostas

Topicos relacionados