Hediye Çarkı

tarihinde gönderilmiş tarafından

çalışan hali için tıklayınız.

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

<head>
    <style>
        body{
            background-color: #ec4646;
        }
        #buton1 {
            width: 120px;
            height: 40px;
            font-size: 20px;
            background-color: #ffff00;
            color: #b82020;
            margin-top: 460px;
            margin-left: 390px;
        }
        #buton2 {
            width: 120px;
            height: 40px;
            font-size: 20px;
            background-color: #b82020;
            color: #ffff00;
        }
        #resim {
            position: absolute;
            left: 300px;
            z-index: -1;
        }

        #resim1 {
            width: 70px;
            position: absolute;
            top: 180px;
            left: 490px;
        }
        img {
            width: 450px;
        }
        #puan_yeri{
            width: 400px;
            height: 200px;
            background-color: #663f3f;
            color: #51c2d5;
            margin-left: 850px;
            margin-top: -350px;
            line-height: 200px;
            text-align: center;
            font-size: 60px;
        }
    </style>
    <script>
        var numbers =["100", "2000", "300", "5000", "7000", "800", "400", "1000"];
        var derece = 0;
        var myVar
        function cevir() {
            derece = derece + (360/8); // 8 tane dilim var. her bir aşamada bir dilim.45
            document.getElementById("resim").style.transform = "rotate(" + derece + "deg)";
        }
        function surekli() {
            myVar = setInterval(cevir, 60);
            buton1.disabled = true;
            buton2.disabled = false;
        }
        function durdur() {
            clearInterval(myVar);
            buton1.disabled = false;
            buton2.disabled = true; hangi_dilim= (((derece/45)%8))
            document.getElementById("puan_yeri").innerHTML=numbers[hangi_dilim]+ "$ kazandın" ;
        }

    </script>
</head>
<body>
    <div><img id="resim1" src="ibre.png"></div>
    <div id="resim"><img src="cark1.png"></div>
    <button id="buton1" onclick="surekli()">Çevir</button>
    <button id="buton2" onclick="durdur()" disabled>Durdur</button>
    <div id="puan_yeri"></div>
</body>

</html>