Change DIV background with javascript

Change a DIV background with javascript is quite easy. This script changes the DIV background every 3h.

You will only need:

– a css file containing URLs to different images background:

.back1{   background:url(Imagens/AreaTrabalho1.png);   }

.back2{   background:url(Imagens/AreaTrabalho2.png);   }

.back3{   background:url(Imagens/AreaTrabalho3.png);   }

.back4{   background:url(Imagens/AreaTrabalho4.png); }

 

– a DIV as follows:

<div id=”pagewidth” class=”back1>

– and the the javascript code:

 

<script type=”text/javascript”>

var myDiv = document.getElementById(“pagewidth”);

var currentTime = new Date().getHours();

 if(currentTime >= 3 && currentTime < 6 || currentTime >= 15 && currentTime < 18){ 

myDiv.className = myDiv.className.replace(“back1″,”);

                myDiv.className += “back2”;

                               }                                                            

else if(currentTime >= 6 && currentTime < 9 || currentTime >= 18 && currentTime < 21){

                myDiv.className = myDiv.className.replace(“back1″,”);

                myDiv.className += “back3”;

                               }

else if(currentTime >= 9 && currentTime < 12 || currentTime >= 21 && currentTime < 0){

                myDiv.className = myDiv.className.replace(“back1″,”);

                myDiv.className += “back1”;

                               }           

else if(currentTime >= 12 && currentTime < 15 || currentTime >= 0 && currentTime < 3){

                myDiv.className = myDiv.className.replace(“back1″,”);

                myDiv.className += “back4”;

                                               }                 

else

                {

                myDiv.className = myDiv.className.replace(“back1″,”);

                myDiv.className += “back1”;

}

</script>

 

And… That’s it!

 

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *