Hediye Çarkı
ç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>