Jump to content

Recommended Posts

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..

Share this post


Link to post
Share on other sites

@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>

 

Share this post


Link to post
Share on other sites
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..

Share this post


Link to post
Share on other sites

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>
 
<html lang="pt-BR">
 
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
 
<title> Response | imaster </title>
 
<!-- <link rel="stylesheet" href="./app.css"> -->
</head>
 
<body>
 
<input type="text" name="nameColor" value="red" />
 
<script src="./app.js"></script>
</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
}
} */
}
 
 
 
 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Kauê Fucherberger Bonfá
      eu estou tentando fazer um programa que mostra qual produto vale mais a pena mas eu fiz um if falando que quando o preço e a quantidade dos produtos são iguais a frase "os produtos sao iguais" aparece mas por algum motivo o if não está funcionando.
      <div id="produto1"> <div><input type="number" id="preco1" placeholder="preco"></div> <div><input type="number" id="quantidade1" placeholder="quantidade"></div> </div> <div id="produto2"> <div><input type="number" id="preco2" placeholder="preco"></div> <div><input type="number" id="quantidade2" placeholder="quantidade"></div> </div> <div><button onclick="calcular()">calcular</button></div> <div><p>resultado:<a id="resultado"></a></p></div> <script> function calcular() { var q1 = document.getElementById('quantidade1').value var p1 = document.getElementById('preco1').value var q2 = document.getElementById('quantidade2').value var p2 = document.getElementById('preco2').value if (p1 == p2 && q1 == q2) { document.getElementById('resultado').innerText = 'Os produtos são iguais' } } </script> Não coloquei o codigo inteiro mas acho que assim da pra entender
    • By victorhupo
      Eu tenho um código html e quero que a partir de um formulário o javascript modifique o conteúdo dele porem tenho um conhecimento raso.
       o código seria esse.
      <textarea> <div class="separator" style="clear: both; text-align: center;"> <a href="https://1.bp.blogspot.com/-TDuaU9uqbks/XVQ-Oj0THFI/AAAAAAAAEJw/mMdKEcvI-LwDoTVkcam8OVPse77LndSowCLcBGAs/s1600/S01E08.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="901" data-original-width="1600" src="https://1.bp.blogspot.com/-TDuaU9uqbks/XVQ-Oj0THFI/AAAAAAAAEJw/mMdKEcvI-LwDoTVkcam8OVPse77LndSowCLcBGAs/s1600/S01E08.png" /></a></div> </textarea> eu preciso que a partir do link q o usuário colocar no formulário ele substitua esse link de imagem pelo que foi colocado na tabela. alguém tem alguma solução?
    • By geivisonsales
      Tenho um site sobre conteudos de entretenimento, e todos os posts tem uma imagem de fundo do tmdb, tem alguma maneira de otimizar o carregamento dessas imagens por url? ou alguma outra maneira?
    • By Lottechar
      tenho uma funçao e quero modificar os estilos sem precisar ficar escrevendo "document bla bla" toda hora em todas as modificaçoes .style, 
      o codigo e mais ou menos isso:
       
      function teste() { var info_cor = document.getElementById('mensagemCor').value; mensagemCor.style.color = "#fff"; } ja verifiquei esta com o eveneto os IDs estao certos, mas da erro especificamente na
       
      info_cor.style.color = "#fff"; alguem pode me tirar a duvida de como é a forma correta?
    • By Claudia França
      prezados como eu altero de loked para unloked do arro para não carregar o java e seguir com o procedimento. 
       
       
      ?Veja nesse link https://drive.google.com/drive/u/0/folders/1h0EbUoz3UOL8j9orWirUAPILt7cg7q-p 
      minhas imagens não estao subindindo aqui, não sei porque, acho que tenho limitação. 
       
       
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.