Criando números aleatórios com JavaScript
- Detalhes
- Angelo Luis Ferreira
- JavaScript
- Acessos: 12257
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).
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
