Ir ao conteúdo
  • Comunicados

    • Gabriel Torres

      Seja um moderador do Clube do Hardware!   12-02-2016

      Prezados membros do Clube do Hardware, Está aberto o processo de seleção de novos moderadores para diversos setores ou áreas do Clube do Hardware. Os requisitos são:   Pelo menos 500 posts e um ano de cadastro; Boa frequência de participação; Ser respeitoso, cordial e educado com os demais membros; Ter bom nível de português; Ter razoável conhecimento da área em que pretende atuar; Saber trabalhar em equipe (com os moderadores, coordenadores e administradores).   Os interessados deverão enviar uma mensagem privada para o usuário @Equipe Clube do Hardware com o título "Candidato a moderador". A mensagem deverá conter respostas às perguntas abaixo:   Qual o seu nome completo? Qual sua data de nascimento? Qual sua formação/profissão? Já atuou como moderador em algo outro fórum, se sim, qual? De forma sucinta, explique o porquê de querer ser moderador do fórum e conte-nos um pouco sobre você.   OBS: Não se trata de função remunerada. Todos que fazem parte do staff são voluntários.
    • DiF

      Poste seus códigos corretamente!   21-05-2016

      Prezados membros do Fórum do Clube do Hardware, O Fórum oferece um recurso chamado CODE, onde o ícone no painel do editor é  <>     O uso deste recurso é  imprescindível para uma melhor leitura, manter a organização, diferenciar de texto comum e principalmente evitar que os compiladores e IDEs acusem erro ao colar um código copiado daqui. Portanto convido-lhes para ler as instruções de como usar este recurso CODE neste tópico:  
Rodrigo Zambrano

efeito acende, apaga e quebra lâmpada com javascript

Recommended Posts

Meu problema é o seguinte. Quero fazer o seguinte efeito. Tenho imagem de 03 lâmpadas apagadas, uma do lado da outra. Quando passo o mouse  por cima da lâmpada 01 ela acende. Quando passo o mouse por cima da lâmpada 02, ela acende e deixa a lâmpada 01 ainda acessa. Quando passo para a lâmpada 03 ela acende e deixa as lâmpadas 01 e 02 acessas também. Quando tiro o mouse das lâmpadas elas apagam, as 03. Até aí eu fiz usando javascript ("getElementById" e trocando as fotos. O que quero fazer agora é quando clicar na lâmpada 01 ela quebrar e as outras duas apagam, quando clicar na lâmpada 02, a lâmpada 01 e 02 quebram e a terceira se apaga (ou mantem apagada). E quando clicar na lâmpada 03, as 03 quebram. E depois que uma lâmpada é quebrada nada mais pode ser feito. O efeito chega ao fim, seja quebrando a lâmpada 01, 02 ou 03. Alguém pode me ajudar? Consigo fazer isso usando JavaScript. Meus arquivos já estão preparados por lampada_acessa / lampada_apagada / lampada_quebrada. Obrigado!!

Editado por Rodrigo Zambrano

Compartilhar este post


Link para o post
Compartilhar em outros sites
DiF    2.636

@Rodrigo Zambrano Olá, seja bem vindo em nosso Clube do Hardware.

Você pode fazer tudo isso com javascript...   se quiser ter uma melhor ajuda, poste suas imagens e o código javascript.

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

 

 A dificuldade é quando clicar no quadrado 01, fica acesso e os outros apagados. Quando clicar no 02 fica o 01 e 02 acessos e o 03 apagado. E quando clicar no 03, fica os 03 acessos, 01, 02 e 03. E nada muda mais depois de cada click. Fecharia a função javascript. @DiF, será que não consegue nos ajudar? Muito obrigado mais uma vez! :D Abração

Editado por DiF
Retificar seu post, porque o post anterior foi apagado.

Compartilhar este post


Link para o post
Compartilhar em outros sites
DiF    2.636

@Rodrigo Zambrano Sim, podemos ajudar,  mas você precisa postar a sua tentativa de código( não a copiada do post anterior) 

Precisamos que você poste seu andamento, a sua lógica e  etc.

 

De inicio eu questiono o seguinte:

No primeiro post, você informa que sua lampada tem 3 estados. Apagada, acesa e quebrada.

O estado inicial é apagado. Quando clica uma vez na lampada 1, ela acende, quando clica na lampada 1 de novo ela quebra. Se a 1 quebrar antes dos outros,  quando clicar no 2, a lampada 1 não poderá ser acesa pois está quebrada. e assim por diante até quebrar as tres.

 

Agora no seu segundo post você abandonou a ideia de quebrar? 

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

@DiF, mudei meu exercício de aprendizado e ao invés de fazer as luzes acenderem, apagarem e quebrarem eu estou tentando simplificar (ou não..hehe) e fazer um ranking de estrelas. Porém também, ao escrever o código parei no mesmo ponto das luzes, onde depois de clicar gostaria que ficasse tudo estático, ou seja, se clico em 3 estrelas, permanece 3 estrelas, se pontuo 2, 5 estrelas, para também em 2,5. E não volta mais. Segue meu código abaixo. Pode me ajudar com este exercício? Explicando melhor, fiz 10 arquivos, 10 metades de estrelas. Ex: metadeesquerda1.png, metadedireita1.png...etc...)

<!DOCTYPE html>
<html lang="pt-br">
      <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/estrelas.css">
        <script>
           function marcaMeioPonto(){
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        
        <script>
           function marcaUmPonto(){
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaUmPontoEmeio(){
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaDoisPontos(){
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaDoisPontosEmeio(){
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaTresPontos(){
             document.getElementById("metadedireita3").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaTresPontosEmeio(){
             document.getElementById("metadeesquerda4").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita3").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaQuatroPontos(){
             document.getElementById("metadedireita4").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda4").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita3").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaQuatroPontosEmeio(){
             document.getElementById("metadeesquerda5").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita4").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda4").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita3").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
           function marcaCincoPontos(){
             document.getElementById("metadedireita5").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda5").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita4").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda4").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita3").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda3").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita2").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda2").src = "img/metadeestrelacheia-esquerda.png";
             document.getElementById("metadedireita1").src = "img/metadeestrelacheia-direita.png";
             document.getElementById("metadeesquerda1").src = "img/metadeestrelacheia-esquerda.png";
        }
        </script>
        <script>
          
           function limpaestrelas(){
                                     

                     document.getElementById("metadedireita5").src = "img/estrela-vazia-metadedireita5.png";
             document.getElementById("metadeesquerda5").src = "img/estrela-vazia-metadeesquerda5.png";
             document.getElementById("metadedireita4").src = "img/estrela-vazia-metadedireita4.png";
             document.getElementById("metadeesquerda4").src = "img/estrela-vazia-metadeesquerda4.png";
             document.getElementById("metadedireita3").src = "img/estrela-vazia-metadedireita3.png";
             document.getElementById("metadeesquerda3").src = "img/estrela-vazia-metadeesquerda3.png";
             document.getElementById("metadedireita2").src = "img/estrela-vazia-metadedireita2.png";
             document.getElementById("metadeesquerda2").src = "img/estrela-vazia-metadeesquerda2.png";
             document.getElementById("metadedireita1").src = "img/estrela-vazia-metadedireita1.png";
             document.getElementById("metadeesquerda1").src = "img/estrela-vazia-metadeesquerda1.png";
           
                     
           }
        </script>
        <script>
          
            function fixaestrela(){
                
                    
                                   
            }
        </script>
        
        
        
      </head>
        
        <body>
             <div class="star">     
                 <article class="stars">
                    <img src="img/estrela-vazia-metadeesquerda1.png" id="metadeesquerda1" onmousemove="marcaMeioPonto()" onmouseout="limpaestrelas()" onclick="fixaestrela()"/>
                    <img src="img/estrela-vazia-metadedireita1.png" id="metadedireita1" onmousemove="marcaUmPonto()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadeesquerda2.png" id="metadeesquerda2" onmousemove="marcaUmPontoEmeio()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadedireita2.png" id="metadedireita2" onmousemove="marcaDoisPontos()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadeesquerda3.png" id="metadeesquerda3" onmousemove="marcaDoisPontosEmeio()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadedireita3.png" id="metadedireita3" onmousemove="marcaTresPontos()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadeesquerda4.png" id="metadeesquerda4" onmousemove="marcaTresPontosEmeio()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadedireita4.png" id="metadedireita4" onmousemove="marcaQuatroPontos()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadeesquerda5.png" id="metadeesquerda5" onmousemove="marcaQuatroPontosEmeio()" onmouseout="limpaestrelas()"/>
                    <img src="img/estrela-vazia-metadedireita5.png" id="metadedireita5" onmousemove="marcaCincoPontos()" onmouseout="limpaestrelas()"/>
            
                 <article>
             </div>        
        
        
        
        
        </body>
</html>        
        

 

Editado por DiF
Botão CODE <>
  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites
DiF    2.636

@Rodrigo Zambrano Sei que você está tentando aprender e tal.. mas este não é bom para exercício.  Não desta forma. Não vai conseguir atingir o efeito desejado assim.  Você precisa criar um código javascript que manipule o evento e o elemento. O código seria extenso demais  fazendo em javascript puro como quer.

Para isso, como aprendizado, eu sugiro que você estude direto o jQuery, que é o javascript de forma mais simples e existe aos montes plugins para rating de votação com estrela. 

Na verdade é bem fácil com ele veja uns exemplos que possuem explicações de como usar:

http://rateyo.fundoocode.ninja/

https://github.com/irfan/jquery-star-rating

http://irfandurmus.com/projects/jquery-star-rating-plugin/

http://antenna.io/demo/jquery-bar-rating/examples/

 

Na minha opinião pessoal, mais vai beneficiar você, e forçar a entender como funciona. Foi assim que aprendi!

  • Curtir 1

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário







Sobre o Clube do Hardware

No ar desde 1996, o Clube do Hardware é uma das maiores, mais antigas e mais respeitadas publicações sobre tecnologia do Brasil. Leia mais

Direitos autorais

Não permitimos a cópia ou reprodução do conteúdo do nosso site, fórum, newsletters e redes sociais, mesmo citando-se a fonte. Leia mais

×