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>
