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 ProCODEH
      Eai, galera!
      Estou tentando criar um player de música com playlist, porém não estou tendo muito sucesso, pois quando clico em alguma música o player de música abre em outra página e não na página principal onde quero que fique o player e onde quero que toque (como padrão).

      Vocês podem me dar uma ajuda nisso?
      Tenho esse código:
       
      //* PLAYER DE MÚSICA. inicio(); function inicio(){ var corrente = 0; var audio = $("#musica"); var playlist = $("#playlist"); var tracks = playlist.find("li a"); var len = tracks.length -1; musica[0].play(); playlist.find("a").click(function(e){ e.preventDefault(); link = $(this); corrente = link.parent().index(); run(link, musica[0]); }); musica[0].addEventListener("ended", function(e){ corrente++; if(corrente == len){ corrente = 0; link = playlist.find("a")[0]; }else{ link = playlist.find("a")[corrente]; } run($(link), musica[0]); }); } function run(link, player) { player.src = link.attr("href"); par = link.parent(); par.addClass("active").siblings().removeClass("active"); player.load(); player.play(); } ul{list-style: none; padding: 0px} a{text-decoration: none; color: #444; font-family: arial} li:hover{background: #eee; border-bottom: solid 1px #f60;} li{width: 20%; padding: 5px; border-bottom: solid 1px #ccc;} .active a{color:#f60; padding-left: 1px; font-style: italic;} <audio id="musica" preload="auto" tabindex="0" controls="controls"> <source src="Blackbear-doremi.mp3" type="audio/mpeg"/> Desculpaaa, o áudio não é suportado pelo seu navegador :( </audio> <ul id="playlist"> <li class="active"><a href="Blackbear-doremi.mp3"> BlackBear - Do Re Mi</a></li> <li><a href="BMTH-Medicine.mp3"> Bring Me The Horizon - Medicine</a></li> <li><a href="Hozier-TakeMeToChurch.mp3"> Hozier - Take Me To Church</a></li> </ul>  
    • By thgsousa3122
      <?php $url = 'www.site.com'; $dadosSite = file_get_contents($url); echo $dadosSite; ?> <script type="text/javascript"> window.onload = function(){ var x = document.getElementsByClassName("fraction")[0].innerHTML= "100"; } </script> Glr tenho esse codigo, eu queria alterar o conteudo que tem como classe "fraction", porem ele nao da resposta, alguem tem alguma sujestão?
    • By SilvioHC
      Olá estou começando a a prender node js mas já no primeiro teste algo de errado não está certo 
      const express = require('express'); const app = express(); app.listen(934); //Sempre Na Ultima Linha não sei dizer se é só o tutorial q é antigo 

    • By Jéssica Nascimento
      Meu código só decifra uma letra, não está fazendo as demias tem algum problema no meu código que não consigo enchegar poderiam me ajudar 
       
      function encode(text, offset){   let alphabetSize = 26; let firstAsci = 65; let textEncode =[]; let encodeArray =[];   for (let i=0; i < text.length; i++){   textEncode[i] = (text.charCodeAt(i)-firstAsci+offset)% alphabetSize +firstAsci; encodeArray.push(String.fromCharCode(textEncode[i])); console.log(encodeArray); return encodeArray.join(''); }
    • By AkSOlaris
      Estou, sem sucesso, tentando utilizar a biblioteca crypto js no meu script. Estou precisando usa-lo para gerar um hash que vai num objeto, porém aparentemente devo estar importando de maneira errada, já que a palavra require que eu atribuo a minha constante simplesmente não é reconhecida. Sou iniciante e estou utilizando essa biblioteca para um projeto em blockchain.  Estou usando o vscode e o node, porém depois daqui nao tenho idéia de como proceder, pois ja fiz de tudo que vi em sites e não entendi, tampouco consegui por em pratica.
       
      A linha de código que deveria chamar a biblioteca:
      const SHA256 = require('crypto-js/sha256');  
×

Important Information

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