Jump to content
chilli2

Configurar um Background que fique piscando

Recommended Posts

Boa tarde,

 

Pessoal, eu gostaria de fazer o seguinte, que o meu background pisque com cores diferentes quando aparecer uma mensagem. Ex.

quando a palavra for (up) o background pisque na cor verde;

quando a palavra for (down) o background pisque na cor vermelha;

 

Desde já muito obrigado.

Share this post


Link to post
Share on other sites

Boa tarde,

 

faça algo parecido com isso

var palavra = 'up';

if (palavra != '') {
	if (palavra == 'up') {
		document.body.style.backgroundColor = "#00FF00";
	} else if (palavra == 'down') {
		document.body.style.backgroundColor = "#FF0000";
	}

	setTimeout(function() {
		document.body.style.backgroundColor = "initial";
	}, 300);
}

Onde é verificado se a variável palavra não é vazia (não sei da onde você vai pegar o valor para a variável), depois é verificado se é up ou down, e caso seja um deles, é setado uma cor de backgroud para o elemento body, logo abaixo após 0,3 segundos, é colocado a cor original do body. Arrume o tempo de acordo com a velocidade que você deseja o efeito de piscar.

Share this post


Link to post
Share on other sites
14 horas atrás, Everson da Luz disse:

Boa tarde,

 

faça algo parecido com isso


var palavra = 'up';

if (palavra != '') {
	if (palavra == 'up') {
		document.body.style.backgroundColor = "#00FF00";
	} else if (palavra == 'down') {
		document.body.style.backgroundColor = "#FF0000";
	}

	setTimeout(function() {
		document.body.style.backgroundColor = "initial";
	}, 300);
}

Onde é verificado se a variável palavra não é vazia (não sei da onde você vai pegar o valor para a variável), depois é verificado se é up ou down, e caso seja um deles, é setado uma cor de backgroud para o elemento body, logo abaixo após 0,3 segundos, é colocado a cor original do body. Arrume o tempo de acordo com a velocidade que você deseja o efeito de piscar.

Opa, bom dia agradeço pela ajuda...então os valores up e down eu busco de uma aplicação chamada zabbix você conhece?

Share this post


Link to post
Share on other sites

Não conheço essa aplicação, então não poderei te ajudar com isso. Mas depois que você conseguir pegar os dados, faça algo parecido com esse script que coloquei, você pode até testa-lo, só abrir o console do Chrome e colocar o script lá

Share this post


Link to post
Share on other sites
3 minutos atrás, Everson da Luz disse:

Não conheço essa aplicação, então não poderei te ajudar com isso. Mas depois que você conseguir pegar os dados, faça algo parecido com esse script que coloquei, você pode até testa-lo, só abrir o console do Chrome e colocar o script lá

opa...como assim no console do chrome, desculpe...

Share this post


Link to post
Share on other sites

Isso mesmo, só abrir como esta na imagem, colar o código e dar um enter.

 

Esse erro é de outro script,

antes de colocar o código e dar enter clica no botão de limpar o console (imagem anexo).

 

Testei aqui e não de nenhum erro

 

clear.png

Share this post


Link to post
Share on other sites

Realmente deu certo, soh uma ultima pergunta guri, caso eu quisesse colocar ao invés de up / down eu colocasse numeros, ex 1 = up   2 = down teria como?

Share this post


Link to post
Share on other sites
24 minutos atrás, chilli2 disse:

Realmente deu certo, soh uma ultima pergunta guri, caso eu quisesse colocar ao invés de up / down eu colocasse numeros, ex 1 = up   2 = down teria como?

 

CÓDIGO

// 1 = UP
// 2 = DOWN
var palavra = 2;

if (palavra != '') {
	if ( palavra == 1 ) { // UP
		document.body.style.backgroundColor = "#00FF00";
	} else if (palavra == 2) { // DOWN
		document.body.style.backgroundColor = "#FF0000";
	}

	setTimeout(function() {
		document.body.style.backgroundColor = "initial";
	}, 300);
}

 

Share this post


Link to post
Share on other sites

Não conheço esse sistema,

mas se você não tem o acesso ao código fonte dele, ou o sistema não disponibiliza a opção de fazer isso que você quer, não há o que fazer.

Agora se pode alterar o código dele, procure o local onde é executado o JS e altere.

Não podemos te ajudar com isso

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 renato.tomio
      Criar um sistema de votação para uma premiação musical. Esse sistema deverá ser desenvolvido utilizando HTML + Javascript ES6.
       
       
      a) Existem 4 candidatos concorrendo ao prêmio:
      i) Rita Lee (número 100)
      ii) Cartola (número 101)
      iii) Ney Matogrosso (número 102)
      iv) Anitta (número 103)
      b) Para realizar a votação, o usuário terá que digitar seu CPF e o número do candidato.
      i) O usuário não pode votar duas vezes.
      ii) Se o usuário votar em um número inválido, o sistema contabilizará esse voto como nulo.
      c) Devido a um conflito da confraternização, a candidata Anitta foi desclassificada mas não deu tempo de retirá-la do painel de votação. Você terá que realizar uma validação avisado que o voto nela não é válido (dando a possibilidade desse mesmo usuário votar em outro candidato).
      d) O sistema deve mostrar automaticamente a quantidade e porcentagem de voto de cada candidato (parecido com o protótipo).
      i) O cálculo da porcentagem dos candidatos deverá desconsiderar os votos nulos
      LINK DO PROTOTIPO: https://www.figma.com/proto/S8tKx3hDbJJNaWJ9WFjzINVY/Prova?node-id=0%3A1&viewport=766%2C1015%2C0.5&scaling=scale-down&redirected=1
    • By michael450
      Senhores, boa tarde.
       
      Estou com um probleminha... rss', preciso fazer a listagem de uma função da biblioteca "SPED-NFe"   na qual consulto quais as NFe que emitiram contra meu CNPJ, porém o ele executa toda a função e depois me trás o resultado, eu gostaria de trazer o resultado instantaneamente, como se fosse uma atualização segundo a segundo.
       
       
      Essas informações não são salvas em DB, é apenas para consulta.
      Se alguém puder ajudar serei muito grato,
       
      Abraço.
       
      Michael Douglas
    • By Lincoln Ferreira
      Eu estou tentando fazer um Jquery steps wizard mas não consigo colocar pra ele parar caso não tenha sido preenchido o formulario no segundo passo.
      http://www.jquery-steps.com/Examples
       
      if (newIndex === 2 && $("#Rua").val() == "") { return false; } $(document).ready(function() { $("#wizard").steps({ headerTag: "h2", bodyTag: "section", transitionEffect: "slideLeft", stepsOrientation: "vertical", labels: { current: "current step:", pagination: "Pagination", finish: "Finalizar", next: "Confirmar", previous: "Voltar", loading: "Carregando ..." }, onStepChanging: function(event, currentIndex, newIndex, cepError) { if (currentIndex > newIndex) { return true; } if (newIndex === 1) { return true; } if (newIndex === 2 && $("#Rua").val() == "") { return false; } } } ) }); <div id="wizard"> <h2>Verificação pedido</h2> <section> <h2><strong>Pedido:</strong></h2> <div class="lista-carrinho"></div> </section> <h2>Local de entrega</h2> <section> <div class="informações-usuario"> <form method="get" action="." id="#form-cep"> <div class="form-row"> <div class="form-group col-md-6"> <label for="cep">Cep:</label> <input name="cep" type="text" class="form-control" id="cep" placeholder="09572-660" value="" size="10" maxlength="9" required> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="rua">Rua:</label> <input name="rua" class="form-control" type="text" id="rua" placeholder="Sete de Dezembro" size="60" maxlength="" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="bairro">Bairro:</label> <input name="bairro" class="form-control" type="text" placeholder="Nova Gerty" id="bairro" size="40" maxlength="40" /> </div> </div> <div class="form-row"> <div class="form-group col-md-6"> <label for="n">N°:</label> <input name="n" class="form-control" type="text" placeholder="2" id="n" size="6" maxlength="10" /> </div> </div> <div class="form-group col-md-6"> <label for="complemento">Complemento:</label> <input name="complemento" type="text" class="form-control" id="complemento" placeholder="Ao lado do extra" value="" size="10" maxlength="9" requerid> </div> <div class="form-row"> <div class="form-group col-md-11"> <label for="cidade">Cidade:</label> <input name="cidade" class="form-control" type="text" placeholder="São Bernardo do Carpo" id="cidade" size="40" maxlength="40" /> </div> </div> </div> </form> </div> </section> <h2>Forma de pagamento</h2> <section> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <h2>Informe sua forma de pagamento :</h2> </div> <div class="row d-flex justify-content-center col-sm col-md col-lg m-5 "> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Dinheiro" name="dinheiro" type="radio" class="radio"> <label for="Dinheiro">Dinheiro</label> </div> </li> </div> <div class="row"> </div> <div class="col-2"> <li class="list-inline-item"> <div class="pure-radiobutton"> <input id="Cartao" name="cartao" type="radio" class="radio"> <label for="Cartao">Cartão</label> </div> </li> </div> </div> </section> </div>
    • By marcelocardoso
      Fala galera...
      Depois de tanto sofrer tentando e pesquisando na internet, não consegui resolver...
      A nível de conhecimento, segue código para:::

      1) Ao clicar, pegar o id do botão, em seguida abrir com slidetoggle e jogar no TOP tipo ancora.
      2) ou seja, expandir a slidetoggle, mas POSICIONAR no id da DIV, SECTION ou etc...

      CODE:
       
      $(function () { // $("#btn-maps").on("click", function () { // $('html, body').animate({ // scrollTop: $("#maps").slideToggle('slow').offset().top - 135 // }, 1200, 'linear'); // }); $("#btn-maps").click( function (event) { event.preventDefault(); if ($("#maps").is(":visible")) { $("#maps").slideUp(600).offset().top; } else { $("#maps").slideDown(600).offset().bottom; } } ); }); Este código, funciona perfeitamente, adaptado de vários códigos buscados na internet, porém, não consigo com nenhum dos dois, posicionar ao CLICK o SLIDETOGGLE ao expandir deixar examente no inicio do ID;

      Dicas, Sugestões como fazer, realizar, agradeço.
      Obrigado.

       
    • By Guss
      var carro = {
      cor = "azul",
      modelo = "fusca",
      marca = "Volwagen,
      kms = 10000,
      combustivel = "gasolina"
      }
       
×

Important Information

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