<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>中奖实例</title>
<style>
* {
padding: 0;
margin: 0;
}
body,html {
width: 100%;
height: 100%;
}
.ctn {
width: 100%;
height: 100%;
background-color: #ccc;
}
.ctn .disk {
width: 446px;
height: 446px;
border-radius: 1000px;
position: relative;
margin: 0 auto;
background: url(http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/disk.jpg) no-repeat center;
}
.ctn .disk .btn {
width: 85px;
height: 85px;
border-radius: 100px;
position: absolute;
top: 189px;
left: 178px;
cursor: pointer;
}
.ctn .disk img {
position: absolute;
top: 119px;
left: 165px;
}
.ctn .disk .word {
font-weight: bold;
}
</style>
<script id="jquery_182" type="text/javascript" class="library" src="http://runjs.cn/js/sandbox/jquery/jquery-1.8.2.min.js"></script>
<script id="jqueryplugins9_jquery_rotate_22" type="text/javascript" class="library" src="http://runjs.cn/js/sandbox/jquery-plugins/jQueryRotate.2.2.js"></script>
</head>
<body>
<div class="ctn">
<div class="disk">
<img src="http://sandbox.runjs.cn/uploads/rs/253/e6wsbxul/start.png" width="112" />
<div class="btn"></div>
<p class="word">点击小图开始吧~</p>
</div>
</div>
<script>
//转盘数据
var data = [
{angle: 0, reward: "恭喜您中了一等奖，呵呵~"},
{angle: 30, reward: "谢谢参与，呵呵~"},
{angle: 60, reward: "谢谢您的参与，呵呵~"},
{angle: 90, reward: "要加油哦，呵呵~"},
{angle: 120, reward: "恭喜您中了三等奖，呵呵~"},
{angle: 150, reward: "运气先攒着，呵呵~"},
{angle: 180, reward: "谢谢您的参与，呵呵~"},
{angle: 210, reward: "再接再厉，呵呵~"},
{angle: 240, reward: "恭喜您中了二等奖，呵呵~"},
{angle: 270, reward: "祝您好运，呵呵~"},
{angle: 300, eward: "谢谢您的参与，呵呵~"},
{angle: 330, reward: "不要灰心，呵呵~"}
];
//鼠标事件
var onoff = true;
$(".btn").click(function() {
if(onoff){
var result = whichNum(),
angle = 0;
angle = data[result]["angle"];
$("img").rotate({
angle: angle,
animateTo: 3600 + data[result]["angle"],
duration: 6000,
callback: function() {
$(".word").text(data[result]["reward"]);
onoff = true;
}
});
}
onoff = false;
});
//分散中奖概率
function whichNum() {
var index = Math.ceil(Math.random()*100),
num = 0;
switch(true) {
case (index==1)://一等奖
num = 0;
break;
case (index>1&&index<=4)://二等奖
num = 1;
break;
case (index>4&&index<=10)://三等奖
num = 2;
break;
default://参与奖
num = 3;
}
if(num==3) {
num = Math.floor(Math.random()*9) + 3;
}
return num;
}
</script>
</body>
</html>