Scribd
Carregar
54 visualizações4 páginas

Document

Este documento apresenta um código HTML e JavaScript para criar uma roleta interativa com números de 1 a 10. O código define o estilo CSS para a roleta e números, e inclui funções JavaScript para girar a roleta aleatoriamente, escolher um número, comparar a escolha do usuário com o resultado e dar feedback.

Enviado por

contaprogramadorarthur
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd
54 visualizações4 páginas

Document

Este documento apresenta um código HTML e JavaScript para criar uma roleta interativa com números de 1 a 10. O código define o estilo CSS para a roleta e números, e inclui funções JavaScript para girar a roleta aleatoriamente, escolher um número, comparar a escolha do usuário com o resultado e dar feedback.

Enviado por

contaprogramadorarthur
Direitos autorais
© © All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

Document.

write(“<br>”)

Quando e variável não coloque o aspas

<!DOCTYPE html>

<html>

<head>

<style>

.roleta {

width: 200px;

height: 200px;

border-radius: 50%;

position: relative;

border: 16px solid #f3f3f3;

transition: transform 1s;

.numero {

position: absolute;

width: 30px;

height: 30px;

text-align: center;

line-height: 30px;

background-color: #800080; /* Roxo */

color: white;

border-radius: 50%;

.escolhido {

background-color: #ffd700; /* Dourado */

animation: piscar 1s linear infinite;

}
@keyframes piscar {

0% { background-color: #800080; } /* Roxo */

50% { background-color: #ffd700; } /* Dourado */

100% { background-color: #800080; } /* Roxo */

</style>

</head>

<body>

<h2>Roleta Realista</h2>

<div class="roleta" id="roleta">

<!-- Adicione mais números aqui com posições apropriadas -->

<!-- Exemplo -->

<div class="numero" style="top: -10px; left: 40px;">1</div>

<div class="numero" style="top: 30px; left: -10px;">2</div>

<div class="numero" style="top: 80px; left: -20px;">3</div>

<div class="numero" style="top: 130px; left: -10px;">4</div>

<div class="numero" style="top: 180px; left: 40px;">5</div>

<div class="numero" style="top: 180px; left: 130px;">6</div>

<div class="numero" style="top: 130px; left: 180px;">7</div>

<div class="numero" style="top: 80px; left: 190px;">8</div>

<div class="numero" style="top: 30px; left: 180px;">9</div>

<div class="numero" style="top: -10px; left: 130px;">10</div>

</div>

<p>Escolha um número de 1 a 10:</p>

<input type="number" id="escolha" min="1" max="10">

<button onclick="escolherNumero()">Escolher</button>

<button onclick="girar()">Girar a Roleta</button>


<script>

var roleta = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // Adicione mais números aqui

var escolha;

function girar() {

var roletaDiv = [Link]("roleta");

var graus = [Link]() * (360/[Link]) + (720/[Link]); // Gira pelo menos


duas vezes

[Link] = "rotate(" + graus + "deg)";

setTimeout(function() {

var resultado = girarRoleta();

[Link]("O número é " + resultado);

if (resultado == escolha) {

alert("Parabéns! Você acertou!");

} else {

alert("Que pena! O número é " + resultado);

}, (1000/[Link]));

function escolherNumero() {

escolha = [Link]("escolha").value;

var numeros = [Link]("numero");

for (var i = 0; i < [Link]; i++) {

if (numeros[i].innerHTML == escolha) {

numeros[i].[Link]("escolhido");

} else {

numeros[i].[Link]("escolhido");

}
function girarRoleta() {

var indice = [Link]([Link]() * [Link]);

return roleta[indice];

</script>

</body>

</html>

Você também pode gostar