jQuery基于json動態(tài)獲取中獎名單列表，隨機(jī)點(diǎn)名獲取抽獎用戶信息。這是一款適用于公司年會多個中獎名單批量抽獎源代碼。
使用方法：
1、head引入css文件
<link href="css/css.css" rel="stylesheet" type="text/css">
2、head引入js文件
<script type="text/javascript" src="js/jquery.min.js"></script>
3、body引入HTML代碼
<div class="box">
<p class="Title">中獎名單顯示</p>
<ul class="prizeList">
</ul>
<div class="submit" data-id="0">開 始</div>
</div>
<script type="text/javascript">
//從一個給定的數(shù)組arr中,隨機(jī)返回num個不重復(fù)項(xiàng)
function getArrayItems(arr, num) {
//新建一個數(shù)組,將傳入的數(shù)組復(fù)制過來,用于運(yùn)算,而不要直接操作傳入的數(shù)組;
var temp_array = new Array();
for (var index in arr) {
temp_array.push(arr[index]);
}
//取出的數(shù)值項(xiàng),保存在此數(shù)組
var return_array = new Array();
for (var i = 0; i<num; i++) {
//判斷如果數(shù)組還有可以取出的元素,以防下標(biāo)越界
if (temp_array.length>0) {
//在數(shù)組中產(chǎn)生一個隨機(jī)索引
var arrIndex = Math.floor(Math.random()*temp_array.length);
//將此隨機(jī)索引的對應(yīng)的數(shù)組元素值復(fù)制出來
return_array[i] = temp_array[arrIndex];
//然后刪掉此索引的數(shù)組元素,這時候temp_array變?yōu)樾碌臄?shù)組
temp_array.splice(arrIndex, 1);
} else {
//數(shù)組中數(shù)據(jù)項(xiàng)取完后,退出循環(huán),比如數(shù)組本來只有10項(xiàng),但要求取出20項(xiàng).
break;
}
}
return return_array;
}
var interval;
$(".submit").click(function(){
var status = $(this).data("id");
var ints ;
if(status == 0){
$.get("data.json",{},function(data){
if(data){
if(data.code=="1"){
function times(){
var ArrList=data.data;
var res = getArrayItems(ArrList,20);
str='';
for(o in res){
num = parseInt(o)+1;
str+='<li data-id="'+res[o].id+'">'+num+'、<span>'+res[o].name+'</span><label>'+res[o].tel+'</label></li>';
}
$(".prizeList").html(str);
}
interval = setInterval(times,0);
$(".submit").data("id","1");
$(".submit").text("停止");
}
}else{
alert('Ajax error!');
}
},'json');
}else{
clearInterval(interval);
$(".submit").data("id","0");
$(".submit").text("開始");
}
})
</script>
