Jump to content
Fórum Script Brasil
  • 0

Trocar Fundo div ao atualizar pagina


rafaella.torelli
 Share

Question

Estou tentando trocar a cor do fundo da minha div footer-area ao atualizar a pagina ir para uma cor diferente, porem não entendo muito, tentei fazer o seguinte código mas não deu certo:
 
 
var rodape = 4; 
 
ran = Math.round(Math.random() * (rodape-1))+1 
 
if (ran == (1)) { 
backgroundrodape=("url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #00b9f2"); 
if (ran == (2)) { 
backgroundrodape=("url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #72bf44") 
if (ran == (3)) { 
backgroundrodape=("url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #2e3192") 
if (ran == (4)) { 
backgroundrodape=("url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #ffce00") 
 
 
function carrega() { 
document.footerArea.style.background = backgroundrodape; 
</script> 
Link to comment
Share on other sites

6 answers to this question

Recommended Posts

  • 0

Se a div se chama "footer-area", o problema está na função carrega porque a utilização de dot notation só é possível para formulários, imagens, links, etc..

Experimenta assim:

function carrega() {
    var rodape = 4,
        backgroundrodape = null,
        ran = null;

    ran = Math.round(Math.random() * (rodape - 1)) + 1;

    if (ran === 1) {
        backgroundrodape = "url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #00b9f2";
    }
    if (ran === 2) {
        backgroundrodape = "url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #72bf44";
    }
    if (ran === 3) {
        backgroundrodape = "url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #2e3192";
    }
    if (ran === 4) {
        backgroundrodape = "url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #ffce00";
    }
    document.getElementById("footer-area").style.background = backgroundrodape;
}

 

Link to comment
Share on other sites

  • 0

Então como disse não entendo muito, rsrsrs, então to apanhando um pouco, eu fiz uma pagina em html basica só pra ver se funciona, mas atualizo a pagina e continua a mesma coisa..segue o codigo completo da minha pagina :


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Documento sem título</title>
<style>
.footer-area {
    background: url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #00b9f2;
}
</style>


<script>
function carrega() {
    var rodape = 4,
        backgroundrodape = null,
        ran = null;

    ran = Math.round(Math.random() * (rodape - 1)) + 1;

    if (ran === 1) {
        backgroundrodape = "url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #00b9f2";
    }
    if (ran === 2) {
        backgroundrodape = "url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #72bf44";
    }
    if (ran === 3) {
        backgroundrodape = "url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #2e3192";
    }
    if (ran === 4) {
        backgroundrodape = "url(//sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #ffce00";
    }
    document.getElementById("footer-area").style.background = backgroundrodape;
}
</script>
</head>

<body>
<div class="footer-area" style="width:200px; height:200px">
</div>
</body>
</html>

 

Muito Obrigada mesmo por estar ajudando.

Link to comment
Share on other sites

  • 0

Deu certo!!!! =D

Fiz assim:

var rodape = 4; 
 
ran = Math.round(Math.random() * (rodape-1))+1 
 
if (ran == 1) { 
    backgroundrodape="url(http://www.sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #00b9f2";

if (ran == 2) { 
    backgroundrodape="url(http://www.sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #72bf44"; 

if (ran == 3) { 
    backgroundrodape="url(http://www.sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #2e3192"; 

if (ran == 4) { 
    backgroundrodape="url(http://www.sandaliasgaia.com.br/site_novo/wp-content/themes/retro/images/skin/skin1/footer-area-bg.png) repeat scroll left top #ffce00"; 

  
function carrega() { 
    document.getElementById('footer-area').style.background = backgroundrodape; 

 
window.onload = function(){
    carrega();
 };
 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share



  • Forum Statistics

    • Total Topics
      149.9k
    • Total Posts
      646.8k
×
×
  • Create New...