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

Para não chegar a -1, você pode colocar uma condição if para todas as variáveis.

if (dia == 0 && hora == 0 && minuto == 0 && segundo == 0) {
Exibe a mensagem
}
1 curtida

Então funcionou. Eu coloquei um alert para ver se funciona e deu certo. Só que eu tentei dar um style.display.none, e não funcionou. O intuito era ao dar 0, substituir a contagem por uma mensagem.

Acho que isso não é possível da forma que você fez, pois seu laço de repetição é a própria função.
Mas de toda forma o if deveria funcionar sim

Mas vc acha que não é possível colocar uma mensagem?