Background

chilli2 · Junho 10, 2019

Boa tarde, estou tendo dificuldade na seguinte questão, eu preciso que o meu background fique piscando quando uma determinada palavra apareça, ex. quando aparecer a palavra (Down) o background fique vermelho e quando aparecer a palavra (up) o mesmo background fique na cor verde, como posso montar isso? desde já muito obrigado e parabéns pelo post..

gabrielms · Junho 10, 2019

@chilli2 Criei um script para mudar a cor do background quando uma determinada palavra for digitada:

<!DOCTYPE html>
<html>
  <head>
    <title>Backgroud</title>
  </head>
  <body>
    <script>

      var palavra = ""; // Nessa Variável vai ficar guardardo tudo o que for digitádo na página

      var tempo = null; // Nessa Variável vai ficar guardado o método para limpar a variável que guardar os valores digitados

      var palavrasChaves = { // Nessa array vai ficar a palavra que vai acionar o método que troca a cor dá página e o valor da cor, a palavra chabe deve estar em minuscolo
        "up":"#00ff32",
        "down":"#f60404"
      }

      window.onload = function(){ // Esse método vai adicionar um event, porem isso só vai ser adicionado quando a página terminar de carregar.
        window.addEventListener("keyup", function(event){ // Esse é o evento que vai monitorar o evento keyup, assim verificando qual tecla foi precionada
          palavra += (event.key.length == 1)? event.key : ''; // Aqui eu concateno a tecla precionada a variavel palavra, dessa maneira é possivel verificar se o que o usuário digitou é ou pode ser uma palavra
          // Antes de fazer a concatenaçãoo eu verifico se a contagem de caracteres correspomdente a tecla clicada é igual a 1, assim eu so aceito os valores alfanumericos e caracteres especiais.
          palavra.toLocaleLowerCase(); // Aqui eu converto tudo oque foi registrado para minuscolo
          if (palavrasChaves[palavra]){ // Aqui eu verifico se a palavra digitada forma uma palavra chave que costa no array palavraChave
            document.getElementsByTagName("body")[0].style.background = palavrasChaves[palavra]; // Aqui eu seleciono o body e aplico no background a cor correspondente a palavra chave
          }
          tempo = setTimeout(function(){palavra = ""},10000); // Aqui eu adiciono um temporisado que vai limpar a variável palavra depois de 10 segundo, esse temporisador é reiniciado toda vez que houver um clique
        });
      }

    </script>
  </body>
</html>

chilli2 · Junho 11, 2019

14 horas atrás, gabrielms disse:

@chilli2 Criei um script para mudar a cor do background quando uma determinada palavra for digitada:


<!DOCTYPE html>
<html>
  <head>
    <title>Backgroud</title>
  </head>
  <body>
    <script>

      var palavra = ""; // Nessa Variável vai ficar guardardo tudo o que for digitádo na página

      var tempo = null; // Nessa Variável vai ficar guardado o método para limpar a variável que guardar os valores digitados

      var palavrasChaves = { // Nessa array vai ficar a palavra que vai acionar o método que troca a cor dá página e o valor da cor, a palavra chabe deve estar em minuscolo
        "up":"#00ff32",
        "down":"#f60404"
      }

      window.onload = function(){ // Esse método vai adicionar um event, porem isso só vai ser adicionado quando a página terminar de carregar.
        window.addEventListener("keyup", function(event){ // Esse é o evento que vai monitorar o evento keyup, assim verificando qual tecla foi precionada
          palavra += (event.key.length == 1)? event.key : ''; // Aqui eu concateno a tecla precionada a variavel palavra, dessa maneira é possivel verificar se o que o usuário digitou é ou pode ser uma palavra
          // Antes de fazer a concatenaçãoo eu verifico se a contagem de caracteres correspomdente a tecla clicada é igual a 1, assim eu so aceito os valores alfanumericos e caracteres especiais.
          palavra.toLocaleLowerCase(); // Aqui eu converto tudo oque foi registrado para minuscolo
          if (palavrasChaves[palavra]){ // Aqui eu verifico se a palavra digitada forma uma palavra chave que costa no array palavraChave
            document.getElementsByTagName("body")[0].style.background = palavrasChaves[palavra]; // Aqui eu seleciono o body e aplico no background a cor correspondente a palavra chave
          }
          tempo = setTimeout(function(){palavra = ""},10000); // Aqui eu adiciono um temporisado que vai limpar a variável palavra depois de 10 segundo, esse temporisador é reiniciado toda vez que houver um clique
        });
      }

    </script>
  </body>
</html>

Bom dia, agradeço pela ajuda guri, porém não funcionou...na verdade assim, o campo onde as palavras (up e down) são preenchidos automaticamente...a condição eu até consigo colocar tipo valor 1 up, valor 2 down...seria isso..

felipeoli7eira · Junho 14, 2019

Não entendi a parte do "quando uma determinada palavra apareça". Mas se você quiser fazer uma verificação, pode tentar isso?:

<!DOCTYPE html>

<head>

<title> Response | imaster </title>

</head>

<body>

</body>

</html>

window.onload = () => {

const input = document.querySelector ( 'input' )

// Se você quer apenas verificar qual o valor pre-definido no elemento:

if ( input.value === 'red' )

{

document.body.style.background = 'red'

}

else if ( input.value === 'green' )

{

document.body.style.background = 'green'

}

else

{

document.body.style.background = 'white' // padrão

}

// Se você quiser q isso fique dinâmico, com o usuário digitando:

/* input.onkeyup = event => {

let corDigitada = event.target.value // Evento -> alvo do evento -> valor preenchido no alvo ( input )

if ( corDigitada === 'red' )

{

document.body.style.background = 'red' // Se digitou vermelho, fica vermelho

}

else if ( corDigitada === 'green' )

{

document.body.style.background = 'green' // Se digitou verde, fica vermelho

}

else

{

document.body.style.background = 'white' // Se não, deixa padrão

}

} */

}

Entrar

Background

Recommended Posts

chilli2 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

gabrielms 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

chilli2 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

felipeoli7eira 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Consulta SQL dentro de outra consulta

Data igual do facebook

Fazer busca no Banco de dados usando vários critério

Conteúdo Similar

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante