<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>抽奖大转盘</title>
<style type="text/css">
div{650px;height:600px;margin:50px auto;background:url(images/38/turntable-bg.jpg) no-repeat 0 0;position:relative;}
div #turntable{position:absolute;left:117px;top:59px;transform:rotate(0deg);transition:all 2s ease 0s;}
div #pointer{position:absolute;left:255px;top:154px;}
</style>
<script type="text/javascript">
window.onload = function(){
//获取所需元素
var turntable = document.getElementById('turntable');
var pointer = document.getElementById('pointer');
var click_content = 0;
var timer = 0;
//操作事件
pointer.onclick = function(){
if (click_content>=3){
alert("您没有机会了");
} else{
click_content++;
var gifts = ['未中奖','免单4999元','免单50元','免单10元','免单5元','免分期服务费','提高白条额度']
//度数索引值和gifts值相对应
var degrees = [0,56,103,162,208,260,310]
//从0~6之间抽取一个值作为与gifts相对应的值,对应的就是应该得到的奖品
var gifts_index = Math.floor(Math.random()*7);
var degrees_index = gifts_index
//要转到的度数就是度数的索引值
turntable.style.transform = "rotate("+(3*360*click_content+degrees[degrees_index])+"deg)";
//click_content 表示点击次数
clearTimeout(timer);
var timer = setTimeout (function(){
alert(gifts[gifts_index]);
},3000)
}
}
}
</script>
</head>
<body>
<div><img id="turntable" src="images/38/turntable.png" alt="" /><img id="pointer" src="images/38/pointer.png" alt="" /></div>
</body>
</html>