随机中奖名单抽奖源码

随机中奖名单抽奖源码

收藏
随机中奖名单抽奖源码
jQuery基于json动态获取中奖名单列表,随机点名获取抽奖用户信息。这是一款适用于公司年会多个中奖名单批量抽奖源代码。
  • 软件 Dreamweaver
  • 格式 HTML
  • 作者 I想要
  • 上传时间 6年前

使用方法:

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">
//从一个给定的数组arr中,随机返回num个不重复项
		function getArrayItems(arr, num) {
		    //新建一个数组,将传入的数组复制过来,用于运算,而不要直接操作传入的数组;
		    var temp_array = new Array();
		    for (var index in arr) {
		        temp_array.push(arr[index]);
		    }
		    //取出的数值项,保存在此数组
		    var return_array = new Array();
		    for (var i = 0; i<num; i++) {
		        //判断如果数组还有可以取出的元素,以防下标越界
		        if (temp_array.length>0) {
		            //在数组中产生一个随机索引
		            var arrIndex = Math.floor(Math.random()*temp_array.length);
		            //将此随机索引的对应的数组元素值复制出来
		            return_array[i] = temp_array[arrIndex];
		            //然后删掉此索引的数组元素,这时候temp_array变为新的数组
		            temp_array.splice(arrIndex, 1);
		        } else {
		            //数组中数据项取完后,退出循环,比如数组本来只有10项,但要求取出20项.
		            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>

使用声明

1. 本站所有素材(未指定商用),仅限学习交流请勿用于商业用途。
2. 会员在本站下载的原创商用和VIP素材后,只拥有使用权,著作权归原作者及17素材网所有。
3. 原创商用和VIP素材,未经合法授权,会员不得以任何形式发布、传播、复制、转售该素材,否则一律封号处理。
4. 本平台织梦模板仅展示和个人非盈利用途,织梦系统商业用途请预先授权。