- it技术
- 网页抽奖
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns
="http://www.w3.org/1999/xhtml">
<head
>
<meta http
-equiv
="Content-Type" content
="text/html; charset=utf-8" />
<title
>幸运转盘游戏
</title
>
<style type
="text/css">
#lottery{width:574px;height:584px;margin:20px auto 0;background:url(images/bg.jpg) no-repeat;padding:50px 55px;}
#lottery table td{width:142px;height:142px;text-align:center;vertical-align:middle;font-size:24px;color:#333;font-index:-999}
#lottery table td a{width:284px;height:284px;line-height:150px;display:block;text-decoration:none;}
#lottery table td.active{background-color:#9c290c;}
</style
>
</head
>
<body
>
<div id
="lottery">
<table border
="0" cellpadding
="0" cellspacing
="0">
<tr
>
<td
class="lottery-unit lottery-unit-0"><img alt
="草莓蛋糕" src
="images/logo/1.png"></td
>
<td
class="lottery-unit lottery-unit-1"><img alt
="草莓甜甜圈" src
="images/logo/2.png"></td
>
<td
class="lottery-unit lottery-unit-2"><img alt
="抹茶甜甜圈" src
="images/logo/4.png"></td
>
<td
class="lottery-unit lottery-unit-3"><img alt
="巧克力甜甜圈" src
="images/logo/3.png"></td
>
</tr
>
<tr
>
<td
class="lottery-unit lottery-unit-11"><img alt
="芒果蛋糕" src
="images/logo/7.png"></td
>
<td colspan
="2" rowspan
="2"><a href
="#"></a
></td
>
<td
class="lottery-unit lottery-unit-4"><img alt
="甜甜圈" src
="images/logo/5.png"></td
>
</tr
>
<tr
>
<td
class="lottery-unit lottery-unit-10"><img alt
="草莓蛋糕" src
="images/logo/1.png"></td
>
<td
class="lottery-unit lottery-unit-5"><img alt
="巧克力蛋糕" src
="images/logo/6.png"></td
>
</tr
>
<tr
>
<td
class="lottery-unit lottery-unit-9"><img alt
="草莓甜甜圈" src
="images/logo/3.png"></td
>
<td
class="lottery-unit lottery-unit-8"><img alt
="巧克力蛋糕" src
="images/logo/6.png"></td
>
<td
class="lottery-unit lottery-unit-7"><img alt
="抹茶蛋糕" src
="images/logo/8.png"></td
>
<td
class="lottery-unit lottery-unit-6"><img alt
="芒果蛋糕" src
="images/logo/7.png"></td
>
</tr
>
</table
>
</div
>
<div style
="text-align: center;margin:50px 0;font: normal 14px/24px 'MicroSoftYaHei';">
<p
>恭喜：你抽到了
"<label id="result
"></label>"</p
>
</div
>
<script type
="text/javascript" src
="js/jquery-1.8.3.min.js"></script
>
<script type
="text/javascript" src
="js/game.js"></script
>
</body
>
</html
>
var lottery
={
index
:-1,
count
:0,
timer
:0,
speed
:20,
times
:0,
cycle
:50,
prize
:-1,
init
:function(id
)
{
if($
("#"+id
).find(".lottery-unit").length
>0)
{
$lottery
=$
("#"+id
);
$units
=$lottery
.find(".lottery-unit");
this.obj
=$lottery
;
this.count
=$units
.length
;
$lottery
.find(".lottery-unit-"+this.index
).addClass("active");
};
},
roll
:function()
{
var index
=this.index
;
var count
=this.count
;
var lottery
=this.obj
;
$
(lottery
).find(".lottery-unit-"+index
).removeClass("active");
index
+=1;
if(index
>count
-1)
{index
=0;};
$
(lottery
).find(".lottery-unit-"+index
).addClass("active");
this.index
=index
;
return false;
},
stop
:function(index
)
{
this.prize
=index
;
if(this.prize
==6||this.prize
==11)
{window
.location
="test.html";}
var tem
=$
(".lottery-unit-"+index
).find("img").attr("alt");
$
("#result").html(tem
);
return false;
}
}
function
roll()
{
lottery
.times
+=1;
lottery
.roll();
if(lottery
.times
>lottery
.cycle
+10 &&lottery
.prize
==lottery
.index
)
{
clearTimeout(lottery
.timer
);
lottery
.stop(lottery
.index
)
lottery
.prize
=-1;
lottery
.times
=0;
click
=false;
}
else
{
if(lottery
.times
<lottery
.cycle
)
{
lottery
.speed
-=10;
}
else if(lottery
.times
==lottery
.cycle
)
{
var index
=Math
.random()*(lottery
.count
)|0;
lottery
.prize
=index
;
}
else
{
if(lottery
.times
>lottery
.cycle
+10 &&( (lottery
.prize
==0 &&lottery
.index
==7)||lottery
.prize
==lottery
.index
+1))
{
lottery
.speed
+=110;
}
else
{
lottery
.speed
+=20;
}
}
if(lottery
.speed
<40)
{
lottery
.speed
=40;
};
lottery
.timer
=setTimeout(roll
,lottery
.speed
);
}
return false;
}
var click
=false
window
.onload
=function()
{
this.lottery
.init("lottery");
$
("#lottery a").click(function()
{
if(click
)
{
return false;
}
else
{
lottery
.speed
=100;
roll();
click
=true;
return false;
}
});
};
<html
>
<head
>
<title
>抽奖结果
</title
>
</head
>
<body
>
<p
>芒果蛋糕
</p
>
</body
>
</html
>
