Visual Dicas News

Objetivo Criar um aviso de cookies com HTML, CSS e JavaScript para notificar os visitantes que os seus dados podem ser coletados e utilizados pelo site ou empresa responsável pela página web. Este ...

Objetivo do tutorial Mostrar como identificar o idioma definido no navegador do usuário, utilizando a linguagem de programação PHP. Também mostraremos alguns exemplos de como utilizar essa informaç...

Objetivo Neste tutorial, você verá como utilizar eventos de clique em JavaScript. Eventos de clique são ações que ocorrem quando um leitor clica com o mouse sobre um link, botões ou outros elemento...

Neste tutorial vamos apresentar 2 maneiras para inverter a ordem dos elementos de um array em PHP. Para alcançar esse resultado, temos a opção de utilizar a função array_reverse() ou empregar a estr...

Objetivo Embora o uso de estilos inline no CSS não seja a prática mais recomendada para a criação de efeitos, é possível utilizar essa abordagem para adicionar o efeito hover em links diretamente n...

Objetivo Neste tutorial, você aprenderá as principais formas de selecionar elementos do DOM usando JavaScript. Esses elementos podem incluir elementos HTML, atributos HTML e textos inseridos em um ...

Neste tutorial mostraremos 4 maneiras distintas para adicionar um texto (string) no final do conteúdo de um elemento HTML com JavaScript: 1. Utilizando a propriedade innerHTML 2. Utilizando a pr...

Neste tutorial vamos mostrar como verificar no PHP se um determinado valor existe ou não em um array. Para isso, vamos utilizar a função in_array() que procura um valor específico em um array e reto...

Existem várias maneiras de manipular o valor de entrada de um formulário HTML com JavaScript. Neste tutorial, vamos apresentar 2 maneiras bem simples para alterar o elemento input de um formulário H...

Neste tutorial mostraremos como fazer a comparação entre 2 ou mais arrays em PHP, retornando um novo array com os valores diferentes entre eles. Para isso,  utilizaremos a função array_diff() que co...

Código para criar um botão com efeito "Fade In" em CSS, onde a opacidade do botão diminui quando passamos o cursor do mouse sobre ele. HTML Botão com efeito "Fade In" Fade In CSS .btn TEN...

Neste tutorial vamos mostrar de forma bem simples como identificar se um URL possui barra (/) no final e como remove-la do link de endereço, usando a linguagem PHP. Muito útil para aplicações PHP qu...

Mais Artigos

More From: Notificações PHP JavaScript CSS Botões React

Resultado de imagem para javascript logo

Neste tutorial, vamos mostrar criar números aleatórios utilizando JavaScript. No exemplo, mostraremos um joguinho da tabuada onde o usuário deverá visualizar 2 números aleatórios entre 0 e 9, e acertar o valor destes números quando multiplicados.

Observação: Utilizando a metodologia deste exemplo, você poderá acrescentar números aleatórios em qualquer elemento HTML.

HTML

1. Vamos criar primeiro o conteúdo original do nosso exemplo, onde teremos as div's e botão verificar.

<body onload="resetar()">
<div id="n1"></div>
<div id="x">X</div>
<div id="n2"></div>
<div id="igual">=</div>
<input id="n3"></input>
<button class="botao" onclick="verificar()">Verificar</button>
</body>

Observe que:

  • Acrescentamos o evento "onload" para ativar a função JavaScript toda vez que atualizarmos a página;
  • Acrescentamos as div's "n1" e "n2" onde ficarão os valores aleatórios através das funções JavaScript. 
  • Acrescentamos o campo <input> e o botão <button>
  • Utilizamos o evento "onclick" para disparar a função quando o usuário clicar no botão "Verificar";
  • Acrescentamos as funções: resetar() e verificar();

CSS

2. Agora, vamos acrescentar os estilos CSS do nosso joguinho da tabuada...

#n1 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  float: left;
  font-size: 55px;
  text-align: center;
  line-height: 100px;
}
#x {
  float: left;
  padding: 20px 10px;  
  font-size: 55px;      
}
#n2 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  float: left;
  font-size: 55px;
  text-align: center;
  line-height: 100px;
  
}
#igual {
  float: left;
  padding: 20px 10px;  
  font-size: 55px;
}
#n3 {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  float: left;
  text-align: center;
  font-size: 55px;
 
}
.botao {
  clear: both; 
  float:left; 
  width: 470px;
  height: 50px;
  font-size: 30px;
  margin-top: 15px;
}  

JavaScript

3. Finalmente vamos criar as funcionalidades do nosso joguinho através do código JavaScript. Primeiro criiamos a função verificar() que deverá ser acionada quando o usuário clicar no botão "Verificar":

function verificar () {
  var numero1 = document.getElementById("n1").innerHTML;
  var numero2 = document.getElementById("n2").innerHTML;
  var resultado = document.getElementById("n3").value;
  
  if (numero1*numero2 == resultado) {
    alert("Parabéns, você ACERTOU!");
  } else {
    alert("Você errou, tente de novo!")
  }
  resetar();
}

Explicando o código:

  • Pegamos os valores aleatórios div's "n1" e "n2" e colocamos nas variáveis número1 e número2 respectivamente;
  • Pegamos o valor digitado no campo "n3" e colocamos na variável resultado;
  • Comparamos os valores da multiplicação das variáveis número1 e número2 com o valor da variável resultado;
  • Colocamos o método alert() informando se o usuário acertou ou errou a multiplicação.

4. Vamos criar agora o código JavaScript para a função resetar() que através do evento "onload" deverá ser acionada toda vez que a página for atualizada.

function resetar() {
  var x1 = Math.floor(Math.random()*10);
  var x2 = Math.floor(Math.random()*10);
  document.getElementById("n3").value = "";
  document.getElementById("n1").innerHTML = x1;
  document.getElementById("n2").innerHTML = x2;
}  

Explicando o código:

  • Definimos as variáveis x1 e x2 como valore aleatórios entre 0 e 9;
  • Definimos as div's n1 e n2 com os valores das variáveis x1 e x2 respectivamente;
  • Definimos o valor do campo n3 como vazio ("").

  DICA: Utilize o método JavaScript Math.random() para adicionar números aleatórios, sendo:

Math.random(): retorna um número aleatório entre 0 (inclusive) e 1 (exclusive).

Math.floor(): Utilizado para retornar um número aleatório inteiro.

Exemplos:

Math.floor(Math.random() * 10);          // retorna um número inteiro entre 0 e 9;

Math.floor(Math.random() * 11);         // retorna um número inteiro entre 0 e 10;

Math.floor(Math.random() * 10) + 1;  // retorna um número inteiro entre 1 e 10;

RESULTADO FINAL

Veja agora o nosso exemplo finalizado. Observe que o campo <input>, onde você deve digitar da multiplicação, e o botão "verificar" funcionam agora.

See the Pen yzbNOa by Angelo Luis Ferreira (@angeloalf) on CodePen.

TENTE VOCÊ MESMO

Veja no nosso editor HTML como foi realizado o método JavaScript. No editor, altere os códigos da forma que você desejar. Depois é só copiar os códigos e colar no seu projeto. Clique no link abaixo para abrir nosso editor de testes. (Não esqueça de clicar no botão "Executar" para visualizar os resultados).

Tente você mesmo »  

CÓDIGO COMPLETO DO EXEMPLO

Para copiar e colar nos seus projetos.

HTML

<body onload="resetar()">
<div id="n1"></div>
<div id="x">X</div>
<div id="n2"></div>
<div id="igual">=</div>
<input id="n3"></input>
<button class="botao" onclick="verificar()">Verificar</button>
</body> 

CSS

#n1 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  float: left;
  font-size: 55px;
  text-align: center;
  line-height: 100px;
}
#x {
  float: left;
  padding: 20px 10px;  
  font-size: 55px;      
}
#n2 {
  width: 100px;
  height: 100px;
  border: 1px solid #000;
  float: left;
  font-size: 55px;
  text-align: center;
  line-height: 100px;
  
}
#igual {
  float: left;
  padding: 20px 10px;  
  font-size: 55px;
}
#n3 {
  width: 150px;
  height: 100px;
  border: 1px solid #000;
  float: left;
  text-align: center;
  font-size: 55px;
 
}
.botao {
  clear: both; 
  float:left; 
  width: 470px;
  height: 50px;
  font-size: 30px;
  margin-top: 15px;
} 

JavaScript

function verificar () {
  var numero1 = document.getElementById("n1").innerHTML;
  var numero2 = document.getElementById("n2").innerHTML;
  var resultado = document.getElementById("n3").value;
  
  if (numero1*numero2 == resultado) {
    alert("Parabéns, você ACERTOU!");
  } else {
    alert("Você errou, tente de novo!")
  }
  resetar();
}

function resetar() {
  var x1 = Math.floor(Math.random()*10);
  var x2 = Math.floor(Math.random()*10);
  document.getElementById("n3").value = "";
  document.getElementById("n1").innerHTML = x1;
  document.getElementById("n2").innerHTML = x2;
}

REFERÊNCIA JAVASCRIPT

1. [document.getElementById()] >> Sintaxe e exemplos

COMENTÁRIOS

Compartilhe:

Área do Usuário

Doações

Por favor, ajude o nosso site a se manter online :)

 Obrigado!
Angelo Luis Ferreira
angelo.alf@gmail.com

Produzido por:

Gerador de links

GeraLinks - Agregador de links

 

Agregador de conteúdo TrendsTops

 

Blog Visual Dicas

Conheça o nosso blog Visual Dicas, onde apresentamos dicas de Informática, Internet, Blogs, Software, Hardware, Tecnologia, Gestão Empresarial, RH, Treinamento e Cursos Online.

Visual Dicas

Squids Arduino

 Controle o seu mundo com projetos e ideias para automação, robótica e dispositivos inteligentes. Venha conhecer e compartilhar experiências em projetos na plataforma Arduino.

Squids Arduino

Blogolista.com

O Blogolista.com é um site para a divulgação, promoção e publicidade de blogs. Aqui no Blogolista você encontrará os melhores Links e Blogs da atualidade.

Blogolista.com

Topo