Jump to content
chilli2

Background

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 WagnerFilho
      Não sei se estou aplicando o conceito de javascript modular corretamente, portanto preciso de ajuda!
      Eu separei os arquivos js por responsabilidades.
      Cada arquivo será encarregado para uma determinada função.
      Estou carregando estes arquivos da seguinte forma:

       
      <html> <head> </head> <body> <div id="app-info"> <span id="app-name">name</span> </div> <script src="controllers/controllerExample.js"></script> <script src="resources/ajaxApp.js"></script> <script src="models/modelExample.js"></script> <script src="app.js"></script> </body> </html> observação: Eu não quero ir para o requiresJS. sem que antes eu tenha entendido como realmente funciona o modular pattern
      Além disso, eu quero que o retorno do ajax seja atribuído à um objeto global, podemos chama-lo de ObjectApplication para que em qualquer lugar da aplicação eu possa acessa-lo ?
      Como posso fazer isto ?
      Então tenho alguns arquivos js.
       
      app.js controllers / controllerExample.js models / modelExample.js resources / ajaxApp.js
        app.js
      let ObjectApplication = {}; ;(function( window, document, undefined ) { 'use strict'; function app() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.app = app(); })( window, document ); MyGlobalObject.controllerExample.publicMethod(); console.log(objectApplication.name);  
      controllerExample.js
      ;(function( window, document, undefined ) { 'use strict'; function controllerExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { return MyGlobalObject.modelExample.publicMethod(); //return 'Init'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.controllerExample = controllerExample(); })( window, document );  
      modelExample.js
      ;(function( window, document, undefined ) { 'use strict'; function modelExample() { var $private = {}; var $public = {}; $private.privateVar = 'private var'; $public.publicMethod = function() { buildAppInfo(); //return 'Init in Model'; }; $private.privateMethod = function() { return 'Private method'; }; return $public; } window.MyGlobalObject = window.MyGlobalObject || {}; window.MyGlobalObject.modelExample = modelExample(); })( window, document );  
      ajax
      let buildAppInfo = () => { let url = 'app.json'; let xhr = new XMLHttpRequest(); xhr.open('GET', url, true); xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status = 200) app = JSON.parse(xhr.responseText); console.log(app); } } xhr.send(); };
       
    • By Motta
      As 7 linguagens de programação que você deve aprender em 2020
    • By Rodrigo Biaggio
      Senhores, conseguem me ajudar a evoluir na questão abaixo??
       
      Tenho esse código simples, aonde chamo uma API e percorro um array e pego apenas um campo e faço a soma. Só que preciso retornar além do campo "consumedHostUnits" e o campo "name", conforme print.
       

       
      Alguém poderia me dar uma luz, como fazer isso? 
       
      O resultado seria mostrando 
       
      Name: APIGateway | ConsumedHostsUnits: 2
       
      Segue o HTML:
       
      <!DOCTYPE html> <html lang="pt-br"> <title>API Management</title> <head> <meta charset="8"> </head> <body> <script> var urlapi = ''; function fazerRequisicao(){ var url = urlapi + document.getElementById('hostgroup').value; //var url = urlapi; var xhttp = new XMLHttpRequest(); xhttp.open("GET", url, false); xhttp.send(); var arrayElements = xhttp.responseText.split(','); var i; var sumComsumed = 0.0; for (i = 0; i < arrayElements.length; i++) { if(arrayElements[i].includes("consumedHostUnits")) { sumComsumed = sumComsumed + +arrayElements[i].split(":")[1]; } } document.getElementById("div-responsetext").innerHTML = sumComsumed; } </script> <button onclick="fazerRequisicao();">Pesquisar</button> <input type="text" id="hostgroup" style="width: 100px;"> <hr/> <div id="div-responsetext"></div> </body> </html> Obrigado.
       
    • By Deivid Santos
      Salve galera, estou quebrando a cabeça aqui, já pesquisei mas não achei nada sobre.
      Eu tenho alguns dados que busco no banco de dados e mostro em um datagrid, além do CRUD que implantei eu preciso ter a opção de mudar as posições no banco. Preciso fazer isso pois elas são informações que vão para um telão. e ele segue uma ordem na mostragem dos dados.
      Teria alguma forma de arrastar a linha do grid e assim ele mudar o ID do mesmo conforme a posição que ficaria e assim os outros também seriam atualizados?
      Como exemplo segue uma imagem de como ele funciona. por exemplo eu movimento o ID 1 na posição abaixo do ID 3, assim o ID 2 e 3 se tornariam 1 e 2 com essa movimentação e o que era 1 se torna 3.

       
      Agradeço qualquer ajuda que puder.
       
       
    • By juliosertori
      Olá boa noite, tudo bem galera?
       
      Tenho um input:
      <input type="text" value="0" name="qtdProds" id="qtdProds" class="form-control" onkeyup="atualizaTotalPrecos(this);" required /> E quando ele está ONBLUR, funciona o seguinte script:
      function atualizaTotalPrecos(sel){ var nameInput = sel.name; var IdNameProds = parseInt(nameInput.match(/\d/g).join('')); var valor = $('input[name="produtos_pdv['+IdNameProds+'][qtdProds]"]').val(); var custo = $('input[name="produtos_pdv['+IdNameProds+'][custoProds]"]').val(); var totalCusto = valor*custo; $("[name='produtos_pdv["+IdNameProds+"][custoTotalProds]']").val(totalCusto); //$("[name='totalPedidoDesconto']").val(totalCusto); var descontoPedido = $("#descontoPedido").maskMoney('unmasked')[0]; var total = 0; $('.somaTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) total += valor; }); var totalDescontado = total - descontoPedido; //alert(totalDescontado); $(".SomaTotalPrecos").maskMoney('mask', total); $(".totalpedidos").maskMoney('mask', totalDescontado); //////////////// var totalCusto = 0; $('.somaCustoTotal').each(function(){ var valor = Number($(this).val()); if (!isNaN(valor)) totalCusto += valor; }); $(".SomaTotalCustos").maskMoney('mask', totalCusto); };  
      Onde atualizo o campo .SomaTotalPrecos, funciona perfeitamente.
       
      Mas quando troco para Onkeyup, e inserir 1 por exemplo, primeiro ele preenche o campo com 0, e da segunda vez, ele atualiza para a primeira vez, ou seja, 1.
       
      Ex: coloco o valor de R$ 10,00 e na quantidade coloco 1, ele preenche o campo com 0, depois se insiro 2, ai ele preenche o campo com a quantidade anterior, ou seja 1xR$ 10,00
       
×

Important Information

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