标签：
抽奖页面+js代码
<div class="wardGame"> <table id="lottery" cellspacing= "0" cellpadding= "0" border= "0"> <{foreach from=$showList item=tmp}> <tr> <{foreach from=$tmp item=t}> <{if $t==‘space‘}> <td colspan="26" rowspan="8" > <div class="gameArea"> <div class="start l" > <div class="start_title"> <button id="btn1">开始抽奖</button> <button id="btn2">停止抽奖</button> </div> <div class="start_content" id="addCont"> </div> <div class="clear"></div> </div> <div class="imgShow l" id="imgShow"> </div> <div class="clear"></div> </div> </td> <{else}> <td msg="<{$t.sid}>" id="td<{$t.sid}>" part="<{$t.part}>" name="<{$t.name}>"><img src="./themes/default/img/<{$t.sid}>.jpg" width="20px" height="20px" onerror="javascript:this.src=‘./themes/default/img/default.jpg‘"/></td> <{/if}> <{/foreach}> </tr> <{/foreach}> </table> </div>
php代码：
public function game(){
$r = &$this->system->loadModel("weixin/reward");
$used = $r->getUsed();
$usedOutput=array();
foreach($used as $v){
$usedOutput[]=$v[‘sid‘];
}
$this->pagedata[‘used‘]=json_encode($usedOutput);
$list = $r->getAll();
foreach ($list as $k => $v) {
$list[$k][‘part‘]=$r->getDepart($v[‘part‘]);
}
$i=0;
$lineNO=0;
$showList=array();
foreach ($list as $k => $v) {
if($i<=29){
$lineNO=0;
}else if($i>29&&$i<=59){
$lineNO=1;
}else if($i>59&&$i<=89){
$lineNO=2;
}else if($i>89&&$i<=121){
$lineNO=intval(($i-90)/4)+3;
}else if($i>121&&$i<=151){
$lineNO=11;
}else if($i>151&&$i<=181){
$lineNO=12;
}else{
$lineNO=13;
}
$showList[$lineNO][]=$v;
$i++;
}
$showList[3][4]=$showList[3][3];
$showList[3][3]=$showList[3][2];
$showList[3][2]=‘space‘;
$this->pagedata[‘showList‘]=$showList;
//输出每行每列内容
$this->output();
}
public function gameAjax(){
$id = $_POST[‘id‘];
$r = &$this->system->loadModel("weixin/reward");
if ($id) {
$ans = $r->updateGame($id);
}
//抽奖成功修改数据库game状态
json_encode($ans);exit();
}
js代码
<script type="text/javascript">
var timer=null;
var tmp=‘‘;
var used = <{$used}>;
$(function(){
$(‘#btn1‘).click(function(){
$(‘#btn2‘).click(function(){
stopRand();
});
clearInterval(timer);
timer = setInterval(function(){
tmp = getRandom(1,212);
$(‘#lottery tr td[msg]‘).removeClass(‘active‘);
$(‘#lottery tr td[msg=‘+tmp+‘]‘).addClass(‘active‘);
},100)
});
});
function stopRand(){
$(‘#btn2‘).unbind(‘click‘);
//unbind() 方法移除被选元素的cilck
$(‘#addCont‘).html(‘‘);
used.push(tmp);
clearInterval(timer);
var part = $(‘#lottery tr td[msg=‘+tmp+‘]‘).attr(‘part‘);
var name = $(‘#lottery tr td[msg=‘+tmp+‘]‘).attr(‘name‘);
var num = $(‘#lottery tr td[msg=‘+tmp+‘]‘).attr(‘msg‘);
clon = $("#td"+tmp+" img").clone(true);
clon.css({
"position":"absolute",
"top":$("#td"+tmp).offset().top.toString()+‘px‘,
"left":$("#td"+tmp).offset().left.toString()+‘px‘
});
$("#imgShow").html(‘‘);
$("#imgShow").append(clon);
clon.css("position","absolute");
clon.animate({ top: ‘250px‘,left: ‘850px‘,height: ‘300px‘,width: ‘300px‘},
1500,function(){
$("#td"+tmp).remove(clon);
});
var con = ‘<p>中奖同事</p>‘;
con += ‘<p>‘+part+‘:‘+name+‘</p>‘;
$(‘#addCont‘).append(con);
$.ajax({
type: "POST",
url: "?reward-gameAjax.php",
data: ‘id=‘+tmp,
dataType: ‘json‘,
success: function(json){
alert(‘抽奖成功‘);
}
})
}
// 随机数
function getRandom(max,min){
var range = max-min;
var rand = Math.random();
var rs = min + Math.round(rand * range);
if ($.inArray(rs,used)!=-1) {
return getRandom(max,min);
}else{
return rs;
}
}
</script>
思路：在后台输出布局的内容，在前台产生随机数，将随机数加入数组 判断是否重复抽取，抽取成功后更改员工数据库中状态，根据状态查询出获奖人；
标签：
原文地址：http://www.cnblogs.com/xuedong/p/5076197.html
