<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position:relative;width:400px;margin: auto">
<div id="turntable"style="transition:all 1s;width: 400px;height: 400px;"><img src="zhuanpan.jpg" style="width: 400px;height: 400px"></div>
<div id="Lottery" style="width: 132px;height:50px;position: absolute;left:134px;"><img src="choujiang.jpg" style="width: 100px;height: 50px"></div>
<div class="arrow" style="width: 5px;height: 111px;background: #22aadd;position: absolute;left:197px;top:48px;border-top: 0px" ></div>
<div class="triangle" style="border-left:8px solid transparent;border-right:8px solid transparent;border-top:0 solid transparent;border-bottom:8px solid;
border-bottom-color:#22aadd;position: absolute;left:191.2px;top:43px;">
</div>
</div>
<script src="main.js"></script>
</body>
</html>
(function () {
var turntable=document.getElementById("turntable");
var Lottery=document.getElementById("Lottery");
var initialize=0;
var Boole=false;
var Num=0;
Lottery.οnclick=function () {
Num++;
if(Num<4){
if(!false){
Boole=true
var random=Math.floor((Math.random()*24))*15+360;
initialize+=random;
turntable.style.transform="rotate("+initialize+"deg)";
setTimeout(function () {
Boole=false;
},1000)
}
}else{
alert("您只有3次抽奖机会")
}
}
})();