jQuery数字随机抽奖代码

版权：原创更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]
以下是 jQuery数字随机抽奖代码的示例演示效果:
当前平台(PC电脑)
平台:
整屏预览
部分效果截图:
HTML代码(index.html):
<!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=gb2312" />
<title>jQuery��������齱����</title>
</head>
<body>
<!-- ���� ��ʼ -->
<style>
#container {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	height: 100%
}
#show_num {
	width: 100%;
	background: #fff;
	height: 100%;
	padding:5% 0 3% 1%;
}
#num{ padding: 0 0 0 1.2%}
#start,#stop{margin:15% 4% 0 1%}
</style>
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.css">
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.2.js"></script>
<script>
$(document).ready(function(e) {
 	var flag;	//setInterval��־
	var arr = Array();	//����
   	var begin_flag = true;	//��ʼ����ʼ��־
	var ret;
	var num;
	var max_num; //���ֵ
	var repeat = true; //�Ƿ����ظ�
	//0-9��ͼƬ
	var pic_0 = "images/0.png";
	var pic_1 = "images/1.png";
	var pic_2 = "images/2.png";
	var pic_3 = "images/3.png";
	var pic_4 = "images/4.png";
	var pic_5 = "images/5.png";
	var pic_6 = "images/6.png";
	var pic_7 = "images/7.png";
	var pic_8 = "images/8.png";
	var pic_9 = "images/9.png";
	//���������¼�
	$("#max").blur(function(){
		 max_num = $("#max").val();
			if(parseInt(max) > 1000){
			alert("������9-999������");
			begin_flag = false;
			return false;
			}	
			else{
				arr=[];
				for(var i=0;i<=max_num;i++){
				arr.push(i)//ѭ��¼������
				}
				begin_flag = true;
				return true;
				}	
		})
	//��ʼ
	$("#start").click(function(){
			if (begin_flag){
				flag= setInterval(rd,60);
				begin_flag = false;
			}						
		})
	//����
	$("#stop").click(function(){
		clearInterval(flag);
		if(!repeat)
			no_repeat();			
		begin_flag = true;
	})
	//���������
	function rd(){			
			num = arr[Math.floor(Math.random()*arr.length)];	//��õ������
			var hundred,figures,theunit;
			hundred = Math.floor(num/100);	
			figures = Math.floor(num%100/10);
			theunit = Math.floor(num%10);	
			//�����仯
			$("#num_1").css("background","url(images/"+hundred+".png) no-repeat");
			$("#num_2").css("background","url(images/"+figures+".png) no-repeat");
			$("#num_3").css("background","url(images/"+theunit+".png) no-repeat");	
		    }	
			
	//���ظ�	
	function no_repeat(){
			//alert(num);
			//alert(arr);
			var arr_2 = Array();
			for(var i =0; i<arr.length;i++){
				if (arr[i] == num){
					continue;	//������ͬ
					}
				else{
					arr_2.push(arr[i]);		//�����µ�����
					}
				}
				//alert(arr_2);
				if(arr_2.length == 1){	//û��������
					for(var i=0;i<=max_num;i++){
						arr.push(i)//ѭ��¼������
						} 
					}
				else{	//��������
				arr = arr_2;						
				}
		}		
  	  });
</script>

<div id="container"> 
  <!--��һ��begin-->
  <div data-role="page" id="pageone" style="background:#D0C7D3">
    <div data-role="content" style="text-align:center"> <img src="images/head.png" width="1000" style="margin:0 auto">
      <div style="width:20%; margin:0 auto; clear:both">
        <div style="float: left;font-size: 1.2em; padding: 6% 0 0 3%;width: 30%;">���ֵ:</div>
        <div style="width:60%; float:left">
          <input id="max" type="text">
          <!--��ȡ���ֵ,id���--> 
        </div>
      </div>
      <div style="width:18%; margin:0 auto; clear:both"> 
        <!--ת���ڶ���begin,a��ǩ�����Ա��--> 
        <a href="#pagetwo" data-transition="slide" style="text-decoration:none">
        <button>��ʼ�齱</button>
        </a> 
        <!--ת���ڶ���end--> 
      </div>
    </div>
  </div>
  <!--��һ��end--> 
  
  <!--�ڶ���begin-->
  <div data-role="page" id="pagetwo"> 
    <!--��������,���Ա��--> 
    <a href="#pageone" data-transition="slide" data-direction="reverse">
    <div style="background: black"><img src="images/second_bg.png"> </div>
    </a>
    <div data-role="content" id="con__1">
      <p> 
        <!--������ʾ����begin id���-->
      <div id="show_num">
        <div id="num" style="width:400px; margin:0 auto; height:200px;"> <span id="num_1" style="width:33%; padding-top:50%; float:left; background:url(images/0.png) no-repeat"></span> <span id="num_2" style="width:33%; padding-top:50%; float:left;background:url(images/0.png) no-repeat"></span> <span id="num_3" style="width:33%; padding-top:50%;background:url(images/0.png) no-repeat; float:left"></span> </div>
        <div style="width:400px; margin:0 auto; height:100px;"> 
          <!--��ťbegin id���-->
          <button id="start" style="width:40%; float:left; height:50%; background:white">��ʼ</button>
          <button id="stop" style="width:40%; float:left; height:50%; background:white">����</button>
          <!--��ťend id���--> </div>
      </div>
    </div>
    </p>
    <div data-role="footer" id="footerxx" style="position:absolute; width:100%;">
      <h1>Make By Stuinfers</h1>
    </div>
  </div>
  <!--�ڶ���end--> 
</div>
<script type="text/javascript">
function show_box(id) {
	 jQuery('.widget-box.visible').removeClass('visible');
	 jQuery('#'+id).addClass('visible');
}
</script>
<!-- ���� ���� -->
</body>
</html>
附件:下载该文件资源,减少时间成本(增值服务)