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

Front-end JavaScript
,
#1

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

#2

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
#3

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.

#4

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

#5

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