• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

koło fortuny - jak zawsze trafić środek ćwiartki

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
+2 głosów
171 wizyt
pytanie zadane 7 marca w JavaScript przez new_user Użytkownik (640 p.)

hej, czy w takim kole po zakręceniu da się zrobić aby zawsze wypadało na środek danej ćwiartki czyli:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        margin: 0;
        padding: 0;
    }

    a {
        color: #34495e;
    }

    /*WRAPPER*/
    #wrapper {
        margin: 40px auto 0;
        width: 266px;
        position: relative;
    }

    #txt {
        color: red;
    }

    #inner-wheel-sec {
        width: 250px;
        height: 250px;
        transform: rotate(-13deg);
    }

    /*WHEEL*/
    #wheel {
        width: 250px;
        height: 250px;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        transform: rotate(0deg);
    }

    #wheel:before {
        content: '';
        position: absolute;
        border: 4px solid rgba(0, 0, 0, 0.1);
        width: 242px;
        height: 242px;
        border-radius: 50%;
        z-index: 1000;
    }

    #inner-wheel {
        width: 100%;
        height: 100%;

        -webkit-transition: all 6s cubic-bezier(0, .99, .44, .99);
        -moz-transition: all 6 cubic-bezier(0, .99, .44, .99);
        -o-transition: all 6s cubic-bezier(0, .99, .44, .99);
        -ms-transition: all 6s cubic-bezier(0, .99, .44, .99);
        transition: all 6s cubic-bezier(0, .99, .44, .99);
    }

    #wheel div.sec {
        position: absolute;
        width: 50%;
        height: 50%;
        transform-origin: bottom right;
        transform: rotate(calc(60deg * var(--i)));
        clip-path: polygon(0 0, 75% 0, 100% 100%, 0 75%);
    }



    #spin {
        width: 68px;
        height: 68px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: -34px 0 0 -34px;
        border-radius: 50%;
        box-shadow: rgba(0, 0, 0, 0.1) 0px 3px 0px;
        z-index: 1000;
        cursor: pointer;
    }
</style>

<body>


    <div id="wheel">
        <div id="inner-wheel">
            <div id="inner-wheel-sec">
                <div class="sec" style="--i:1; background-color: red;"></div>
                <div class="sec" style="--i:2; background-color: green;"></div>
                <div class="sec" style="--i:3; background-color: red;"></div>
                <div class="sec" style="--i:4; background-color: green;"></div>
                <div class="sec" style="--i:5; background-color: red;"></div>
                <div class="sec" style="--i:6; background-color: green;"></div>
            </div>
        </div>

        <div id="spin">
            <div id="inner-spin"></div>
        </div>

    </div>


</body>
<script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4="
    crossorigin="anonymous"></script>

<script>
    var degree = 1800;
    var clicks = 0;

    $(document).ready(function () {

        $('#spin').click(function () {

            clicks++;

            var newDegree = degree * clicks;
            var extraDegree = Math.floor(Math.random() * (360 - 1 + 1)) + 1;
            totalDegree = newDegree + extraDegree;


            $('#wheel .sec').each(function () {
                var t = $(this);
                var noY = 0;

                var c = 0;
                var n = 700;
                var interval = setInterval(function () {
                    c++;
                    if (c === n) {
                        clearInterval(interval);
                    }

                    var aoY = t.offset().top;
                    $("#txt").html(aoY);
                    console.log(aoY);

                    if (aoY < 23.89) {
                        console.log('<<<<<<<<');
                        $('#spin').addClass('spin');
                        setTimeout(function () {
                            $('#spin').removeClass('spin');
                        }, 100);
                    }
                }, 10);

                $('#inner-wheel').css({
                    'transform': 'rotate(' + totalDegree + 'deg)'
                });

                noY = t.offset().top;

            });
        });



    });

</script>


</html>

 

1 odpowiedź

+2 głosów
odpowiedź 7 marca przez Oscar Nałogowiec (29,340 p.)
Nie losuj pojedynczych stopni - tylko numer pola i przelicz na kpowiedni kąt. Jak masz 6 pól to każde ma 60 stopni - losuj z przedziału 0-5 i pomnóż przez 60.
komentarz 8 marca przez VBService Ekspert (256,320 p.)

Możesz też wink

const quarters = [ 0, 60, 120, 180, 240, 300 ];
const extraDegree = quarters[Math.floor(Math.random() * quarters.length)];

 

Podobne pytania

0 głosów
1 odpowiedź 476 wizyt
0 głosów
2 odpowiedzi 467 wizyt
pytanie zadane 9 marca 2019 w Java przez kikosiak Obywatel (1,010 p.)
0 głosów
0 odpowiedzi 441 wizyt
pytanie zadane 28 kwietnia 2016 w C i C++ przez przemek930010 Nowicjusz (200 p.)

93,187 zapytań

142,203 odpowiedzi

322,021 komentarzy

62,513 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2365p. - dia-Chann
  2. 2326p. - Łukasz Piwowar
  3. 2315p. - Łukasz Eckert
  4. 2301p. - CC PL
  5. 2269p. - Tomasz Bielak
  6. 2235p. - Łukasz Siedlecki
  7. 2232p. - rucin93
  8. 2169p. - Marcin Putra
  9. 2164p. - Adrian Wieprzkowicz
  10. 2006p. - Michal Drewniak
  11. 1950p. - Anonim 3619784
  12. 1909p. - Dawid128
  13. 1901p. - Mikbac
  14. 1744p. - rafalszastok
  15. 1487p. - Michał Telesz
Szczegóły i pełne wyniki

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...