2

Quando ele chegar no "fim" e eu quero que ele mude de cor , sabe me dizer como fazer isso ?

<!DOCTYPE html>
<html>
<head>
  <title>javascript</title>
  <meta charset="utf-8">
  <link type="text/css" rel="stylesheet" media="screen" href="style.css" />
  <script type="text/javascript">

  var count = new Number();
  var count = 60;

  function start(){

    if ((count - 1) >= 0){
      count -= 1;
      if (count == 0) {
        count = "Atualizado";
      }else if(count < 10){
        count = "0"+count;
      }
      tempo.innerText=count;
      setTimeout('start();', 100);

    }
  }

  </script>

</head>
  <body onload="start();">
    <div id="tempo" ></div>
  </body>
</html>
3
  • Reedite sua pergunta, por favor. Commented 13/06/2018 às 15:08
  • Para mudar de cor da div #tempo voce vai precisar acessar ela no final do loop e injetar o background novo. Pode usar document.querySelector("#tempo").style.background = "blue" Commented 28/02/2019 às 22:47
  • A contagem decrescente funcionando no JsFiddle A contagem com minhas especificações Commented 28/02/2019 às 23:57

3 Respostas 3

3

Precisas só de mudar um pouco o teu javascript

var count = 60;
var tempo = document.getElementById("tempo"); // associar a variável tempo ao elemento

function start() {
     if (count > 0){
        count -= 1;
        if (count == 0) {
            count = "Atualizado";
            tempo.classList.add("actualizado"); // adicionar uma classe css para mudar a cor
        }else if(count < 10){
            count = "0" + count;
        }
        tempo.innerText = count;
        setTimeout(start, 100); 
        // em vez de chamar setTimeout("start();", 100) usa só o nome da função
        // o setTimeout vai executar a função mesmo sem pores os ()
    }
}

start(); // chamar a função start() a primeira vez

E no css

.actualizado {
    color: red;
}

Fiz um JsFiddle onde podes ver a contagem decrescente a funcionar

0

Substitua o innerText por innerHTML e faça isso:

if ((count - 1) >= 0){
  count -= 1;
  if (count == 0) {
    count = "<div class='sint'>Atualizado</div>";
  }else if(count < 10){
    count = "0"+count;
  }
  tempo.innerHTML=count;
  setTimeout('start();', 100);
1
  • Com isso é só usar css na div e pronto Commented 28/02/2019 às 22:38
-1

Crie a div texto e use css para a cor em contraste com a div tempo

    count = "<div class='texto'>Atualizado</div>";
1
  • Se vota contra as pessoas não conseguem mais fazer nada aqui é tudo bloqueado! vota a favor ou não vota cara! Commented 24/03/2019 às 21:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .