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;
}

  

COMENTÁRIOS

Blog Visual Dicas

Visual Dicas - A sua fonte de informação!

Controle o seu mundo com pro 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

JSN Epic template designed by JoomlaShine.com