How to make after a while the color of a div change

Asked

Viewed 340 times

1

Well, my question is this:.

How to make a timer on a website, with a countdown of 30 seconds (Real-time), and when it reaches 0, the color of a div changes, even if no one is on the site this has to happen.

How can I do?

Thank you.

php javascript html

  • That is, only change color for those who open the page after 30 seconds of a certain time?

  • For example, the timer counts 30 seconds, that is to say it is counting even if no one is on the site, past those 30 seconds changes the color of a div, and the time goes back to 30, past those 30 comes back to change again etc...

  • 1

    What is the language you have on the server? How many colors are there (and which)? and how is the code of this div generated?

  • actually it might be like that instead of changing a color after 30 seconds enable a function in javascript.

2 answers

2

$(document).ready(function () {
    var adicionaClasse = function(){
      $("#ControleID").addClass("ClasseAqui");
    };

    setTimeout(adicionaClasse, 2000);
});

OR

$(document).ready(function () {
    setTimeout(function(){
      $("#ControleID").addClass("ClasseAqui");
    }, 2000);
});

  • What is the controleid?

  • is the control ID you want to add the class. ex. <input type="text" id="abc" value="" >

1


I don’t know if it’s useful for you, but depending on the case you can do it with CSS using key-frames.

Demo: https://jsfiddle.net/94pgnr6v/

HTML:

<div class="sua-div-aqui">
</div>

CSS:

.sua-div-aqui{
  height: 200px;
  width: 200px;
  // AQUI VOCÊ CHAMA A ANIMAÇÃO
  animation:         nome-animacao 150s steps(1) infinite; /* IE 10+, Fx 29+ */
}

nome-animacao is the name of the key-frame, 150s is the total duration, steps(1) is to block the effect of Cubic-Bezier and infinite to keep repeating the animation when it is finished.

The colors you would set within the key-frame:

@keyframes nome-animacao {
  0%  {background-color: #A100C7;}
  20% {background-color: #00A1E6;}
  40% {background-color: #A1E633;}
  60% {background-color: #E6B02E;}
  80%{background-color: #DC0063;}
}

Note that we defined 150s earlier, dividing by 5 colors is equal to 30 seconds each colour.

Whenever you want to add a color or remove it, you should redo these calculations. After all, it is of course easier to do this with Javascript. I just wanted to show you another way to do it without using programming.

Browser other questions tagged php javascript html

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