0

Estou com um problema em javascript onde a cada período de tempo troca-se a cor de um elemento.

Segue o código abaixo:

<script type="text/javascript">
        var timer = setInterval(modCor, 5000);
        var cor = 0;

        function modCor (){

            if (cor==0){
                var cor = 1;
                var logoImg = document.getElementById('logo');
                logoImg.style.border = "thick solid #00FF00";
            }else if (cor == 1){
                var cor = 0;
                var logoImg = document.getElementById('logo');
                logoImg.style.border = "thick solid #FF0000";
            }
        }
</script>

Este é o HTML:

<img src="empresa logo.jpg" class="Image_geral" id="logo">
1
  • Qual o problema? Seja um pouco mais específico... 12/06/2018 às 22:45

2 Respostas 2

1

Você está redeclarando a variável cor dentro da função, e com isso perde acesso à variável do escopo externo. Faça assim (aproveitei pra remover uma repetição desnecessária):

var timer = setInterval(modCor, 5000);
var cor = 0;

function modCor (){
    var logoImg = document.getElementById('logo');
    if (cor==0){
        cor = 1;
        logoImg.style.border = "thick solid #00FF00";
    }else if (cor == 1){
        cor = 0;
        logoImg.style.border = "thick solid #FF0000";
    }
}
#logo {
  width: 300px; 
  height: 200px; 
  background: #ccc;
  transition: all 1s;
}
<div id="logo"></div>

O efeito de transição fica por conta do CSS.

2
  • Obrigado mesmo resolveu boa parte do meu problema, preciso de uma melhoria, como coloco um tempo de transição nas trocas de cor ? 13/06/2018 às 0:32
  • @NelsonFrancisco No CSS dá para controlar as transições, atualizei meu exemplo.
    – bfavaretto
    13/06/2018 às 2:46
0

Se eu entendi bem, você quer um loop de background, bom tem uma função em CSS3 que dá para fazer isso por você, mas você pode esta imaginando como isso pode me ajudar? Bom você pode fazer com JavaScript é adicionar e remover class, você vai precisar de 3 itens: HTM , CSS e JAVA SCRIP;

HTML

<div id="alpha" class="alpha">a</div>

CSS3

/*Alpha é uma class de cor inicial*/
    .alpha{
        width: 500px;
        height: 500px;
        background: #09f;
    }
    /*Beta é a class que faz a animação*/
    /*Ela sera adicionada e removida o tempo todo*/
    .beta{
        /*Nome da animação*/
        animation-name: cor;
        /*Tempo da animação 4s = 4 segundo / 0.5s = 0,50 segundos*/
        animation-duration: 4s;
    }
    /*Chama animação caso tenha class*/
    @keyframes cor{
        0% {background: #09f;}
        50% {background: #f00;}
        100% {background: #09f;}

    }

SCRIPT

//Define o elemento como uma variavel Global
    var elemento = document.getElementById("alpha");

    //Função principal
    function funcao(){
        //Loop por 5s setInterval(function(){}, 5000);
        setInterval(function(){ 
            //Linha abaixo é bom para verificar no console, F12 do teclado
            console.log("time");

            //Remove a class Beta
            elemento.classList.remove("beta");
            //Da um tempo de 1s para adicionar a Class Beta novamente
            setTimeout(adicionar, 1000);

        }, 5000);
    }
    //Função que adiciona a class
    function adicionar(){
        elemento.classList.add("beta");
    }

    //Chama a função principal
    window.onload = funcao();

Vale lembrar que o tem que ser o último conteúdo, porque se não ele tem chance de não encontrar a div no documento, dá para ter uma praticidade mair usando o jQuery api e algumas outras de controle de interface.

Boa sorte e bom estudos com seu desejo =D

2
  • 1
    Que interessante, nesse caso irei trocar por meio do JS a class da minha div, dessa forma alterando a formatação aplicada é isso ? 17/07/2018 às 23:57
  • Existe um negocio no css chamado animation, você esta aplicando uma animação em uma div. 19/07/2018 às 0:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .