jquery+php实现公司多人随机抽奖

抽奖页面+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', '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>

　　思路：在后台输出布局的内容，在前台产生随机数，将随机数加入数组  判断是否重复抽取，抽取成功后更改员工数据库中状态，根据状态查询出获奖人；