Scribd Logo
Fazer o upload

Bem-vindo(a) ao Scribd!

  • Document

    Enviado por

    contaprogramadorarthur
    12 visualizações4 páginas

    Direitos autorais

    © © All Rights Reserved

    Formatos disponíveis

    DOCX, PDF, TXT ou leia online no Scribd

    Você considera este documento útil?

    Este conteúdo é inapropriado?

    Denunciar este documento

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    12 visualizações4 páginas

    Document

    Enviado por

    contaprogramadorarthur

    Direitos autorais:

    © All Rights Reserved
    Baixe no formato DOCX, PDF, TXT ou leia online no Scribd
    Sinalizar o conteúdo como inadequado
    de 4

    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 = document.getElementById("roleta");

    var graus = Math.random() * (360/roleta.length) + (720/roleta.length); // Gira pelo menos


    duas vezes

    roletaDiv.style.transform = "rotate(" + graus + "deg)";

    setTimeout(function() {

    var resultado = girarRoleta();

    console.log("O número é " + resultado);

    if (resultado == escolha) {

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

    } else {

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

    }, (1000/roleta.length));

    function escolherNumero() {

    escolha = document.getElementById("escolha").value;

    var numeros = document.getElementsByClassName("numero");

    for (var i = 0; i < numeros.length; i++) {

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

    numeros[i].classList.add("escolhido");

    } else {

    numeros[i].classList.remove("escolhido");

    }
    function girarRoleta() {

    var indice = Math.floor(Math.random() * roleta.length);

    return roleta[indice];

    </script>

    </body>

    </html>

    Você também pode gostar