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 Ewerton Hugo
      Boa noite, estou tentando fazer um site, que mostre a hora no momento que é acessado, juntamente com uma imagem que represente os periodos do dia, manhã
      , tarde e noite.Porém não consigo fazer com que o código em java script funcione alguém pode me ajudar (sou iniciante)?
       
       
       
    • By huntressDc
      Estou com uma atividade de aula para fazer e gostaria de uma ajuda, devo receber do usuário o valor da compra e o valor pago, e então exibir o troco. Até aí ok, só que também pede para exibir numa textarea as notas utilizadas no troco, informando sempre o mínimo de notas possíveis, exemplo:
       
       
      vlrCompra = 53,00 vlrPago = 100,00 vlrTroco = 47,00 notasTroco = 4 notas de 10,00 1 nota de 5,00 2 notas de 1,00  
      Não sei como fazer essa última parte, alguém para me ajudar? AS NOTAS QUE EU TENHO DISPONIVEIS SAO 1, 5, 10, 50
      Eis o que fiz até agora:
       
      function calculaTroco(){          var valorCompra = parseFloat($("#valorCompra").val());     var valorPago = parseFloat($("#valorPago").val());     var valorTroco = 0;          if (validarCampos() && validarNan()){         if (valorPago == valorCompra){             valorTroco = 0;             $("#valorTroco").val(valorTroco);             alert("Não gerou troco");                      }else if(valorPago > valorCompra){                          valorTroco = valorPago - valorCompra;             $("#valorTroco").val(valorTroco);                      }else{             alert("Não gerou troco (Valor pago menor que valor da compra)");         }         notasUtilizadas();         $("#valorCompra").val("");         $("#valorPago").val("");         $("#valorCompra").focus();     } } validarCampos() e validarNan() são apenas funções de tratamento. A função notasUtilizadas() seria a função que não estou conseguindo fazer... Devo utilizar array, if, for nessa atividade.
       
      Se alguém puder me ajudar, me dar umas dicas, agradeço muito!
       
      Parte do HTML:
      <!DOCTYPE html>
      <html lang="pt-BR">
          <head>
              <meta charset="utf-8"/>
              <title>Calcular Troco</title>
              <script type="text/javascript" src="jquery.js"></script>
              <style type="text/css">
                  fieldset { width:250px; }
                  label { display:block; float:left; } 
                  label, input, textarea, select { width:150px; margin: 5px 0; }
                  th, td { border:1px solid #ccc; font-size:0.9em; }
              </style>
          </head>
          <body>
              
              <form id="formulario">
                  <fieldset>
                      <legend>Calcular Troco</legend>
                      
                      <label for="valorCompra" >Valor da compra:</label>
                      <input type="text" id="valorCompra" name="valorCompra" /><br />
                      
                      <label for="valorPago" >Valor pago:</label>
                      <input type="text" id="valorPago" name="valorPago" /><br /><br />
                      
                      <button type="button" id="button" onclick="calculaTroco()">Calcular troco</button><br /><br />
                      
                      <label for="valorTroco" >Valor do troco:</label>
                      <input type="text" id="valorTroco" name="valorTroco" readonly="readonly"/><br /><br />    
                      
                      <label for="notasUtilizadas">Notas utilizadas:</label>
                      <textarea rows="3" id="notasUtilizadas" readonly="readonly" ></textarea><br/>
                      
                  </fieldset>
              </form>
          <script type="text/javascript" src="troco.js"></script>
          </body>
      </html>
    • By Vinicius Bazan
      Estou tendo um problema em elaborar o meu código com javascript, estou fazendo um teste em html e css simples pra depois elaborar um website, o objetivo aqui é fazer um relógio pelo JS e ter um contador em baixo desse relógio que vai pegar valores a partir de um switch para esse contador funcionar, isso porque se trata de dados sobre tipos de agressões contra as mulheres, então os cases do switch tem o dado em segundos para executar a formula, uma mensagem inicial e uma mensagem final.
       O usuário teria dois botões, um de cada lado (nesse caso estou usando 2 div com as ID's #btd e #bte, ao apertar esses botões aumentaria o valor de uma variável em +1 ou -1 e isso faria o switch escolher outro case e trocar os dados do contador, mas os dados não são trocados, mantendo as informações iniciais.
       Ao todo tem 4 funções, a função relogio(), contador(), btd() e bte(), sendo que a btd e bte estão dentro da contador() 
       Estou colocando o codigo dentro do spoiler, se alguém puder me ajudar a achar alguma solução agradeço
       
      OBS: Eu nem sei se pode ter uma function dentro da outra, mas como estou aprendendo JS ainda, imagino que assim como outras estruturas (If, Else, Switch, etc...) possa ser possível colocar uma função dentro da outra.
       
       
    • By digonaweb
      Bom dia!
       
      Alguém pode me ajudar com esse script abaixo?
       
      Preciso fazer com que o link abra em uma nova janela, pois fica abrindo em um quadrado onde está fisicamente o relógio no site.
       
      <!-- clock widget start -->
       
      <script type="text/javascript">
           var css_file=document.createElement("link");
           css_file.setAttribute("rel","stylesheet");
           css_file.setAttribute("type","text/css");
           css_file.setAttribute("href","//s.bookcdn.com//css/cl/bw-cl-150x70.css");
           document.getElementsByTagName("head")[0].appendChild(css_file);
      </script>
       
      <div id="tw_1_737904741"><div style="width:150px; height:70px; margin: 0 auto;">
      <a href="https://booked.net/time/rio-de-janeiro-18486">Rio de Janeiro</a>
      <br/></div></div>
       
      <script type="text/javascript"> function setWidgetData_737904741(data){ if(typeof(data) != 'undefined' && data.results.length > 0) { for(var i = 0; i < data.results.length; ++i) { var objMainBlock = ''; var params = data.results; objMainBlock = document.getElementById('tw_'+params.widget_type+'_'+params.widget_id); if(objMainBlock !== null) objMainBlock.innerHTML = params.html_code; } } } var clock_timer_737904741 = -1; </script> <script type="text/javascript" charset="UTF-8" src="https://widgets.booked.net/time/info?ver=2&domid=209&type=1&id=737904741&scode=124&city_id=18486&wlangid=1&mode=1&details=0&background=ece0bf&color=4c4d57&add_background=ffffff&add_color=2071c9&head_color=ffffff&border=1&transparent=1"></script>
       
      <!-- clock widget end -->
       
       

       
       

    • By Vinicius Bazan
      Galera to com uma duvida aqui, no javascript é possível fazer uma função dentro de outra e uma acessar os valores de uma var da outra?
       
      Por exemplo digamos que eu tenha uma function a() e uma function b(), eu preciso que a function a utilize valores de variáveis que estarão na function b, se isto for possível a função b terá que estar dentro de a ou seria ao contrario?
×

Important Information

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