javascript countdown

Asked

Viewed 6,287 times

2

When he gets to the "end" and I want him to change color, he can tell me how to do it ?

<!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>
javascript html5

3 answers

3

You just need to change your javascript a little bit

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

And in css

.actualizado {
    color: red;
}

I made a Jsfiddle where you can see the running countdown

0

Replace the innerText for innerHTML and do this:

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);

  • With this just use css in div and ready

-1

Create the text div and use css for the color in contrast to the time div

    count = "<div class='texto'>Atualizado</div>";

  • If you vote against people can no longer do anything here is all blocked! vote for or no vote!

Browser other questions tagged javascript html5

You are not signed in. Login or sign up in order to post.