<!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" />
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("tbody>tr:even").addClass("even");
$("tbody>tr:odd").addClass("odd");
$("thead>tr").addClass("th");
$("tbody>tr").hover(function(){
$(this).addClass("selected");
},function(){
$(this).removeClass("selected");
});
$("#add_user").click(function(e){
$("#add").css("left",e.pageX).css("top",e.pageY).show("1000");
$("#close").click(function(){
$("#add").hide("1000");
});
});
$("#button").click(function(){
$telephone = $("#phone").val();
$name = $("#name").val();
$.post("data_pro.php",{
type:0,
telephone : $telephone,
name : $name
},function(data){
if(data==1)
{
alert("添加成功");window.location.reload();
}
else
{
alert("系统错误");window.location.reload();
}
});
});
$("#clear").click(function(){
$.post("data_pro.php",{type:6},function(){
window.location.reload();
})
});
$.post("data_pro.php",{
type:1
},function(data){
$("#user_list").html(data);
});
$.post("data_pro.php",{
type:2
},function(data){
$("#num").html(data);
});
$.post("data_pro.php",{
type:4
},function(data){
$("#result").html(data);
});
$("#choujiang").click(function(){
$.post("data_pro.php",{type:3},function()
{
window.location.reload();
}
);
});
$.post("data_pro",{type:5},function(data){$("#unum").html(data)});
});
</script>
<title>抽奖系统</title>
</head>
<style type="text/css">
table{ margin:0 auto;}
table thead tr th,table tbody tr td { border:1px solid #ccc; text-align:center; padding:2px 2px; }
b{ color:red;}
.odd{ background:#eff;}
.even{ background:#eee;}
.th{ background:#bbe;}
.selected{ background:#FFCCCC; cursor:pointer;}
dd{ margin:10px auto; width:300px;}
.delete{ cursor:pointer;}
#add_user,#clear{ cursor:pointer; float:left; margin-left:200px;}
#add{border:1px solid #ccc; margin:0 auto; width:400px; height:130px; display:none; position:absolute; background:#eee;}
</style>
<body>
<fieldset style="width:200px; height:100%; margin:0 auto;">
<legend>抽奖系统</legend>
<dl style="text-align:center;"><input type="button" value="电话号码抽奖" id="choujiang" /></dl>
</fieldset>
<dd id="add_user">添加抽奖人</dd> <dd id="clear">清空已抽奖列表</dd>
<div id="add">
<dd style="border-bottom:1px ridge #eee; text-align:center;">添加抽奖的号码</dd>
<dd>手机号码:<input type="text" id="phone" /></dd>
<dd>手机主人:<input type="text" id="name" /></dd>
<dd style=" text-align:center;"><input type="button" id="button" value="添加" /><input type="button" value="关闭" id="close"/></dd>
</div>
<fieldset style="width:800px; height:100%; margin:20px auto;">
<legend>获奖号码显示</legend>
<table width="700px" height="100%" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>获奖号码</th><th>获奖人姓名</th><th>排序</th>
</tr>
</thead>
<tbody id="result">
</tbody>
</table>
</fieldset>
<fieldset style="width:800px; height:100%; margin:20px auto;">
<legend>抽奖人列表</legend>
<div style="width:800px; height:100%; background:#fff; overflow:scroll;">
<table width="700px" height="100%" border="0" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th>参与号码</th><th>参与人姓名</th><th>排序</th><th>操作</th>
</tr>
</thead>
<tbody id="user_list">
</tbody>
</table>
</div>
<dd>总共参与人数:<b id="num"></b>人 已抽奖人数:<b id="unum"></b>人</dd>
</fieldset>
</body>
</html>