Ir para conteúdo
Fórum Script Brasil
  • 0

Trocar Fundo div ao atualizar pagina

rafaella.torelli

Perguntado por rafaella.torelli,

 Share

Pergunta

rafaella.torelli

rafaella.torelli

Postado
Postado
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 para o comentário
Compartilhar em outros sites

6 respostass a esta questão

Posts Recomendados

  • 0
wootzor

wootzor

Postado
Postado

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 para o comentário
Compartilhar em outros sites
  • 0
rafaella.torelli

rafaella.torelli

Postado
  • Autor
Postado

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 para o comentário
Compartilhar em outros sites
  • 0
rafaella.torelli

rafaella.torelli

Postado
  • Autor
Postado

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 para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.

×
 Share
Ir para lista de Perguntas


  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...