<!DOCTYPE html>
<!-- saved from url=(0030)http://localhost:90/choujiang/ -->
<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>
<!--header-->
<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;// 默认先转40次
var yushu = 0; // 除4余数
var miao = 100;// 初始转速
var num = 0; // 随机数
var count = 0; // 计数器
$(".button").click(function(){
$(this).attr({"disabled":"disabled"});
$(this).css('background','#c4c4c4');
yushu = 0; // 除4余数
miao = 100;// 初始转速
var len = array1.length;
var irandom = parseInt(Math.random()*len+1);
num = cishu + array1[irandom-1];// 取1-30的随机数
count = 0;
setTimeout(zhuandong, 300);
//if(array1[irandom-1] != 4)
{
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>转盘抽奖
2016-03-17
1697
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
目录
相关文章
|
1月前
|
JavaScript
|
15天前
|
小程序
|
3月前
|
小程序
|
3月前
|
3月前
|
前端开发
JavaScript
容器
|
3月前
|
索引
|
4月前
|
开发者
|
8月前
|
9月前
|
JavaScript
|
10月前
|
小程序
前端开发
JavaScript