<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
</head>
<body>
<style>
.box{
width:400px; height:400px;
top:50%; left:50%;
margin-left:-200px;
margin-top:-200px;
position:absolute;
background:#C4C4C4;
border-radius: 200px;
box-shadow:1px 1px 20px 15px #C5BFBF;
font-family:'黑体';
font-weight:bold;
font-size:14px;}
.child{ width:198px; height:198px; float:left; border:1px #193EB3 solid; background:#DAEB33; line-height:198px; text-align:center;}
.list1 { border-radius: 199px 0px 0px 0px; border-left:1px #eee solid;border-top:1px #eee solid; line-height:230px;}
.list2 { border-radius: 0px 199px 0px 0px; border-right:1px #eee solid;border-top:1px #eee solid; line-height:230px;}
.list4 { border-radius: 0px 0px 0px 199px; border-left:1px #eee solid;border-bottom:1px #eee solid; line-height:150px;}
.list3 { border-radius: 0px 0px 199px 0px ; border-right:1px #eee solid;border-bottom:1px #eee solid; line-height:150px;}
.button{ position:absolute; width:80px; height:80px; left:50%; top:50%; margin-left:-40px; font-size:18px; border:none; font-weight:bold;
margin-top:-40px; border-radius:40px; background:#2BC73D; line-height:80px; text-align:center; cursor:pointer;}
.button:hover{box-shadow:1px 1px 20px 15px #C5BFBF;background:red;}
</style>
<div class="box grad">
<div class="list">
<div class="child list1" style="background: rgb(218, 235, 51);">一等奖：空气清新器</div>
<div class="child list2" style="background: red;">二等奖：精美四件套</div>
<div class="child list4" style="background: rgb(218, 235, 51);">鼓励奖：肴肉蘸醋</div>
<div class="child list3" style="background: rgb(218, 235, 51);">三等奖：多功能足浴盆</div>
</div>
<button class="button" style="background: rgb(43, 199, 61);">抽奖</button>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
$(function() {
var array1 = new Array(4,4,2,4,4,3,4,1,4);
var cishu = 40;
var yushu = 0;
var miao = 100;
var num = 0;
var count = 0;
$(".button").click(function(){
$(this).attr({"disabled":"disabled"});
$(this).css('background','#c4c4c4');
yushu = 0;
miao = 100;
var len = array1.length;
var irandom = parseInt(Math.random()*len+1);
num = cishu + array1[irandom-1];
count = 0;
setTimeout(zhuandong, 300);
{
var newarry = new Array();
var bremove = false;
for(var i=0;i<array1.length; i++)
{
if( (array1[i]!=array1[irandom-1]) || bremove)
newarry.push(array1[i]);
if(array1[i]==array1[irandom-1])
bremove = true;
}
array1 = newarry;
}
});
function zhuandong(){
count++;
yushu = count%4;
if(yushu==0)
{
yushu = 4;
if(count>30)
{ miao = miao<250?miao+50:miao;}
else
{ miao = miao>100?miao-50:miao;}
}
$(".child").css('background','#DAEB33');
$(".list"+yushu).css('background','red');
num--;
if(num<=0)
{
setTimeout(function(){
alert("恭喜您喜中："+$(".list"+yushu).html());
$(".button").removeAttr("disabled");
$(".button").css('background','#2BC73D');
}, 500);
}
else{
setTimeout(zhuandong, miao);
}
}
});
</script>
</body></html>
