Este código cria uma página web simples que realiza um sorteio de números aleatórios de 1 a 100. Vou explicar cada parte:
1. Estilo Visual da Caixa:
- A primeira parte do código dentro de `<div>` cria uma caixa estilizada.
- A caixa tem um fundo escuro (#16161d), bordas arredondadas, uma sombra suave para dar profundidade e um pouco de preenchimento interno (padding) para espaço.
- O texto dentro da caixa é centralizado e tem uma cor branca para contraste.
2. Título "Sorteio de Números":
- Dentro da caixa, há um título grande "Sorteio de Números" que é mostrado no topo.
3. Área para Mostrar o Número Sorteado:
- Abaixo do título, há um espaço grande (com tamanho de fonte 48px) para exibir o número sorteado. Inicialmente, este espaço mostra "000".
4. Botão para Sortear Número:
- Existe um botão com o texto "Sortear". O botão tem um fundo azul (#007bff), texto branco, e muda o cursor do mouse para uma mão quando você passa sobre ele (indicando que é clicável).
- Quando você clica neste botão, ele chama uma função JavaScript chamada `sortearNumero`.
5. Função de Sorteio:
- A função `sortearNumero` é onde a mágica acontece.
- Esta função gera um número aleatório entre 1 e 100.
- O número gerado é então exibido na área de exibição, substituindo os "000".
- O número é sempre mostrado com três dígitos, preenchendo com zeros à esquerda se necessário (por exemplo, 5 vira "005").
Código:
<script> function sortearNumero() { const numero = Math.floor(Math.random() * 100) + 1; document.getElementById('randomNumber').textContent = numero.toString().padStart(3, '0'); }</script><div style="text-align: center; padding: 20px; background-color: #16161d; border: 1px solid #444; border-radius: 10px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.5); color: #fff; overflow: hidden; min-height:250px"> <h1>Sorteio de Números</h1> <div style="font-size: 48px; margin: 20px 0;" id="randomNumber">000</div> <button style="padding: 10px 20px; font-size: 16px; cursor: pointer; background-color: #007bff; color: #fff; border: none; border-radius: 5px;" onclick="sortearNumero()">Sortear</button></div>