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=utf-8" />
<title>jQuery方形格子抽奖代码下载</title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>

</head>
<body>

<div class="myBox">
		<ul id="cj-a" class="cj">
			<li>01</li>
			<li>02</li>
			<li>03</li>
			<li>04</li>
			<li>05</li>
			<li>06</li>				
			<li>07</li>				
			<li>08</li>				
			<li>09</li>
			<li>10</li>
			<li>11</li>
			<li>12</li>
			<li>13</li>
			<li>14</li>
			<li>15</li>				
			<li>16</li>		
		</ul>

	<div class="bt">点我抽奖</div>
</div>

<span class="text t1">
	<div class='zt'>未抽奖</div>
</span>

<span class="text t2">
	<div class='jieguo'>结果：</div>
</span>
 </body>
 </html>

JS代码(script.js):

///-------------------------------///$(function(){
	///外接php入口程序//用法/*luckDraws($('.cj'),{
	width:100,height:50,line:5,//几行list:5,//几列click:".bt" //点击对象}
);
	*/
function luckDraws(ob,data){
	var anc = ob;
	//祖父元素var list = anc.children("li");
	var click;
	//点击对象var lineNumber;
	//几行 3varlistNumber;
	//几列 4var thisWidth;
	var thisHeight;
	if(data.line==null){
	return;
}
else{
	lineNumber=data.line;
}
if(data.list==null){
	return;
}
else{
	listNumber=data.list;
}
if(data.width==null){
	return;
}
else{
	thisWidth=data.width;
}
if(data.height==null){
	return;
}
else{
	thisHeight=data.height;
}
if(data.click==null){
	return;
}
else{
	click=data.click;
}
///---初始化anc.css({
	width:thisWidth*listNumber,height:thisHeight*lineNumber,position:"relative"}
);
	list.css({
	width:thisWidth,height:thisHeight,position:"absolute"}
);
	var all = listNumber*lineNumber - (lineNumber-2)*(listNumber-2) //应该有的总数if(all>list.length){
	//如果实际方块小于应该有的总数for(var i=0;
	i<(all-list.length);
	i++){
	anc.append("<li>"+all+"</li>");
}
}
list = anc.children("li");
	list.css({
	width:thisWidth,height:thisHeight,position:"absolute"}
);
	list.each(function(index){
	if(index < listNumber){
	//---小于listNumber列$(this).css({
	left:index%listNumber*thisWidth}
);
}
else if(index >= listNumber && index < listNumber+lineNumber-2){
	$(this).css({
	top:(index+1)%listNumber*thisHeight,right:0}
);
}
else if(index >= listNumber+lineNumber-2 && index < all-lineNumber+2){
	$(this).css({
	bottom:0,right:(index+2)%listNumber*thisWidth}
);
}
else{
	/**/
$(this).css({
	bottom:(index-2)%listNumber*thisHeight,left:0}
);
}
if(index+1 > all){
	$(this).remove();
}
}
);
	var ix = 0;
	var speed = 500;
	var Countdown = 1000;
	//倒计时var isRun = false;
	var dgTime = 200;
	$(click).click(function(){
	if(isRun){
	return;
}
else{
	var stime = Math.floor(Math.random()*16+1);
	alert(stime);
	dgTime += stime*10 + 80;
	speedUp();
}
}
);
	function speedUp(){
	//加速isRun = true;
	list.removeClass("adcls");
	list.eq(ix).addClass("adcls");
	ix++;
	init(ix);
	speed -= 50;
	if(speed == 100){
	clearTimeout(stop);
	uniform();
}
else{
	var stop = setTimeout(speedUp,speed);
}
}
function uniform(){
	//匀速list.removeClass("adcls");
	list.eq(ix).addClass("adcls");
	ix++;
	init(ix);
	Countdown -= 50;
	if(Countdown == 0){
	clearTimeout(stop);
	speedDown();
}
else{
	var stop = setTimeout(uniform,speed);
}
}
function speedDown(){
	//减速list.removeClass("adcls");
	list.eq(ix).addClass("adcls");
	ix++;
	init(ix);
	speed += 10;
	if(speed == dgTime+20){
	clearTimeout(stop);
	end();
}
else{
	var stop = setTimeout(speedDown,speed);
}
}
function end(){
	if(ix == 0){
	ix = 16;
}
alert("恭喜 "+ix+" 号中奖了");
	initB();
}
///--归0function init(o){
	if(o == all){
	ix = 0;
}
}
///function initB(){
	ix = 0;
	dgTime = 200;
	speed = 500;
	Countdown = 1000;
	isRun = false;
}
}
$('.cj').luckDraw({
	width:100,//宽height:50,//高line:5,//几行list:5,//几列click:".bt" //点击对象}
);
}
);
	$.fn.extend({
	luckDraw:function(data){
	var anc = $(this);
	//祖父元素var list = anc.children("li");
	var click;
	//点击对象var lineNumber;
	//几行 3varlistNumber;
	//几列 4var thisWidth;
	var thisHeight;
	if(data.line==null){
	return;
}
else{
	lineNumber=data.line;
}
if(data.list==null){
	return;
}
else{
	listNumber=data.list;
}
if(data.width==null){
	return;
}
else{
	thisWidth=data.width;
}
if(data.height==null){
	return;
}
else{
	thisHeight=data.height;
}
if(data.click==null){
	return;
}
else{
	click=data.click;
}
///---初始化anc.css({
	width:thisWidth*listNumber,height:thisHeight*lineNumber,position:"relative"}
);
	list.css({
	width:thisWidth,height:thisHeight,position:"absolute"}
);
	var all = listNumber*lineNumber - (lineNumber-2)*(listNumber-2) //应该有的总数if(all>list.length){
	//如果实际方块小于应该有的总数for(var i=0;
	i<(all-list.length);
	i++){
	anc.append("<li>"+all+"</li>");
}
}
list = anc.children("li");
	list.css({
	width:thisWidth,height:thisHeight,position:"absolute"}
);
	list.each(function(index){
	if(index < listNumber){
	//---小于listNumber列$(this).css({
	left:index%listNumber*thisWidth}
);
}
else if(index >= listNumber && index < listNumber+lineNumber-2){
	$(this).css({
	top:(index+1)%listNumber*thisHeight,right:0}
);
}
else if(index >= listNumber+lineNumber-2 && index < all-lineNumber+2){
	$(this).css({
	bottom:0,right:(index+2)%listNumber*thisWidth}
);
}
else{
	/**/
$(this).css({
	bottom:(index-2)%listNumber*thisHeight,left:0}
);
}
if(index+1 > all){
	$(this).remove();
}
}
);
	var ix = 0;
	var speed = 500;
	var Countdown = 1000;
	//倒计时var isRun = false;
	var dgTime = 200;
	$(click).click(function(){
	if(isRun){
	return;
}
else{
	var stime = Math.floor(Math.random()*16+1);
	$('.zt').html('已点击，结果是数字<span> '+stime+' </span>号中奖');
	///可注释掉dgTime += stime*10 + 80;
	speedUp();
}
}
);
	function speedUp(){
	//加速isRun = true;
	list.removeClass("adcls");
	list.eq(ix).addClass("adcls");
	ix++;
	init(ix);
	speed -= 50;
	if(speed == 100){
	clearTimeout(stop);
	uniform();
}
else{
	var stop = setTimeout(speedUp,speed);
}
}
function uniform(){
	//匀速list.removeClass("adcls");
	list.eq(ix).addClass("adcls");
	ix++;
	init(ix);
	Countdown -= 50;
	if(Countdown == 0){
	clearTimeout(stop);
	speedDown();
}
else{
	var stop = setTimeout(uniform,speed);
}
}
function speedDown(){
	//减速list.removeClass("adcls");
	list.eq(ix).addClass("adcls");
	ix++;
	init(ix);
	speed += 10;
	if(speed == dgTime+20){
	clearTimeout(stop);
	end();
}
else{
	var stop = setTimeout(speedDown,speed);
}
}
function end(){
	if(ix == 0){
	ix = 16;
}
$('.jieguo').html('结果：恭喜 <span> '+ix+' </span> 号中奖');
	///可注释掉initB();
}
///--归0function init(o){
	if(o == all){
	ix = 0;
}
}
///function initB(){
	ix = 0;
	dgTime = 200;
	speed = 500;
	Countdown = 1000;
	isRun = false;
}
}
}
);

CSS代码(style.css):

@charset "utf-8";*{margin:0;padding:0;font-family:"微软雅黑";}
a{text-decoration:none;}
img{border:none;}
li{list-style:none outside none;}
body{background:#c9c9c9;}
/* myBox */
.myBox{width:980px;height:auto;margin:50px auto 0;}
.main{width:400px;height:300px;margin:0 auto;}
.cj{background:#F60;}
.cj li{background:#7A8999;float:left;font-weight:bold;font-size:30px;line-height:50px;text-align:center;color:#fff;}
.cj li.adcls{background:#FF6600;}
.bt{font-weight:bold;width:200px;height:100px;background:#FF6600;margin:20px auto;font-size:40px;line-height:100px;text-align:center;color:#fff;cursor:pointer;}
#cj-a{margin:0 auto;}
.text{text-align:center;background:green;font:normal 12px/20px '微软雅黑';position:fixed;color:#fff;left:50%;width:100px;margin-left:-370px;}
.text span{color:yellow;}
.text.t1{top:10%;}
.text.t2{top:20%;}

附件:下载该文件资源,减少时间成本(增值服务)