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 PRWEB
      Boa tarde!!!
       
      Por favor como faço para marcar um checkbox e ai marca automaticamente um campo radio?
       
      Obrigado
    • By Randys
      Eu selecionei um elemento e adicionei a classe ativo nele, agora não estou conseguindo remover a classe quando eu seleciono outro elemento
      const article = document.getElementById(id); article.classList.add('ativo'); Eu preciso remover a classe ativo quando eu clicar em outro elemento article, como faço isso?
    • By Articulando
      Galera, seguinte. Estou tentando criar um evento em javascript que funciona da seguinte maneira; existem 5 checkbox na tela, ao selecionar dois checkbox os outros irão travar e não permitir o clique, se o usuário clicar novamente retirando a seleção de algum dos que foi selecionado ele volta a habilitar. Até então o código funciona blz, porém agora eu preciso fazer com que os dois primeiros checkbox contém como um único clique, ou seja, são 2 checkbox para travar, porém se eu selecionar o primeiro e o segundo eles contam como um, então eu o usuário poderia realizar outro clique em algum checkbox e ficariam 3 checkbox selecionados, porém isso só se aplica aos dois primeiros checkbox, caso não sejam eles é apenas dois cliques, se eles forem clicados o usuário pode escolher mais uma opção.
       
      o código atual está assim:
       
      <script type="text/javascript">
                  (function(){
                      "use strict";
                      var marcados = 0;
                      var verifyCheckeds = function($checks) {
                          if( marcados>=2 ) {
                              loop($checks, function($element) {
                                  $element.disabled = $element.checked ? '' : 'disabled';
                              });
                          } else {
                              loop($checks, function($element) {
                                  $element.disabled = '';
                              });
                          }
                      };
                      var loop = function($elements, cb) {
                          var max = $elements.length;
                          while(max--) {
                              cb($elements[max]);
                          }
                      }
                      var count = function($element) {
                          return $element.checked ? marcados + 1 : marcados - 1;
                      }
                      window.onload = function(){
                          var $checks = document.querySelectorAll('input[type="checkbox"][name="modalidades[]"]');
                          loop($checks, function($element) {
                              $element.onclick = function(){
                                  marcados = count(this);
                                  verifyCheckeds($checks);
                              }
                              if($element.checked) marcados = marcados + 1;
                          });
                          verifyCheckeds($checks);
                      }
                  }());
              </script>
       
       
      Quem conseguir me ajudar eu agradeço, preciso muito desse código rodando. 
    • By TheRonaldoStar
      Oii, fala ae pessoal!!
      Alguém pode me ajudar com uma coisa por favor?;
      Seguinte!, eu anteriormente fiz uma pergunta aqui no fórum recorrente a isso, mas eu conseguir uma solução parcial.
      Que era, fazer uma listagem de todos os cadastros e fazer a junção dos cadastros com uma coluna igual, Ou seja existem duas colunas [DE e Para], que recebem o id de quem está recebendo ou que está enviando a mensagem, eu conseguir fazer a tal listagem por grupo mas o problema que estou tendo é: que so faz o agrupamento de as colunas contiver o id por ex: [De = "1" e Para ="2"].
      Atualmente estou usando a codificação deste Jeito:
       
      $sql_2 = $db -> prepare("SELECT * FROM privado WHERE (Para = '$Meu_id') Or (De = '$Meu_id') GROUP BY Para, De DESC"); $sql_2 -> execute(); Esta consulta como pode ver ele busca todos os cadastros que tenha o meu ID ou seja do usuário online!, Após a consulta ele vei obter em um "while" somente o [ Id_De eo Id_Para ] desta forma:
      while($dados_2 = $sql_2 -> fetch(PDO::FETCH_OBJ)){ $Id_De = ($dados_2 -> De); $Id_Para = ($dados_2 -> Para); } Mas em fim eu gostaria de saber como mostrar somente um resultado ou seja o ultimo resultado que tiver o meu ID em ambas colunas [ Id_De ou Id_Para ].
      Antes de vocês me recomendar a função DESC LIMIT 'valor' saiba eu quero que liste todos os usuários que enviou ou recebeu minha mensagem não somente 1 ou seja se eu mandar um mensagem para o usuário 2 e ele me retornar uma mensagem vai mostrar somente o ultimo registro que tenha o meu ID e o id dele.
       
      Atenciosamente,
      ~Ronaldo
       
    • By Vinicius Bazan
      Bom dia, Boa tarde e Boa noite!
       
        Estava eu aqui brincando um pouco com JS para entender um pouco melhor essa linguagem, pois eu preciso fazer um relógio em uma pagina HTML e um contador que aumente seu número em +1 de tempos em tempos ( no caso eu estava testando em aumentar a cada 5 segundos, considerando que esse número não vai começar do 0, pois ele teria que pegar todos os segundos que já se passaram nesse dia e dividir por 5, assim seu resultado inteiro seria exibido).
        O relógio com bastante esforço e pesquisa eu consegui fazer e está funcionando, até aqui sem dificuldades, o real problema está no contador, eu fui testar sem colocar um setInterval só para ver se o número aparece na tela e... NADA!
       Então como eu não manjo de JS e tentei fazer a partir do que eu usei pra fazer o relógio eu devo ter errado feio em muita coisa.
       
      <!DOCTYPE html> <html> <head> <title>javascript</title> <meta charset="utf-8"> <script type="text/javascript"> function relogio() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); if (horas < 10) { horas = "0"+horas; } if (minutos < 10) { segundos = "0"+minutos; } if (segundos < 10) { segundos = "0"+segundos; } document.getElementById("relogio").innerHTML=horas+":"+minutos+":"+segundos; } window.setInterval("relogio()",1000); // Aqui começa a função que eu tentei fazer para o contador function contador() { var data = new Date(); var horas = data.getHours(); var minutos = data.getMinutes(); var segundos = data.getSeconds(); var cont = ((minutos + (horas * 60))*60) + segundos ; document.getElementById("contador").innerHTML= Math.floor(cont/5); } </script> <style type="text/css"> #relogio { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } #contador { font:bold 28pt arial; display: block; margin: 100px auto; padding: 30px; background-color: #FFFF00; width: 150px; border-radius: 6px; box-shadow: 0px 0px 5px rgba(0, 0, 0, .5); } </style> </head> <body onload="relogio();"> <div id="relogio"> </div> <hr> <div id="contador"> </div> </body> </html>  
       Se alguém puder me ajudar eu agradeço!
×

Important Information

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