手机移动端网站九宫格抽奖代码PHP+jQuery+Ajax九宫格抽奖转盘

正文 17931字数 228,027阅读

代码一：前端测试

<!DOCTYPE html>
<html>
<head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>演示：PHP+jQuery+Ajax九宫格抽奖转盘</title>
               <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" /> 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

   <script>
		var nwwitdh=$(window).width();
		/*
		window.screen.width 是指屏幕分辨率的宽度；
		$(window).width() 是指浏览器可视窗口的宽度；
		*/
		//var nhheight=$(window).height();
		document.write("<style>#lottery{height:"+nwwitdh+"px;}</style>");
   </script>
        <style type="text/css">
		*{padding:0px;margin:0px;}
		html,body{min-height:100%;min-width:100%;}
#lottery{background:url(images/bg.jpg) no-repeat;    
    background-size: 100%;}
	.lottery-unit {
		    width: 25%;
    height: 25%;
	float: left;
	}
	.lottery-unit-no-gif{
	  background: url(images/no.gif);
    background-size: 100%;
	}
	.lottery-unit-1{

    background: url(images/1.png);
    background-size: 100%;}
		.lottery-unit-2{

    background: url(images/2.png);
    background-size: 100%;}
		.lottery-unit-3{

    background: url(images/3.png);
    background-size: 100%;}
		.lottery-unit-4{

    background: url(images/4.png);
    background-size: 100%;}
	
			.lottery-unit-5{

    background: url(images/5.png);
    background-size: 100%;}
		
			.lottery-unit-8{

    background: url(images/8.png);
    background-size: 100%;}
	
				.lottery-unit-9{
	
    background: url(images/6.png);
    background-size: 100%;}
	
	
					.lottery-unit-11{

    background: url(images/6.png);
    background-size: 100%;}
	
	
						.lottery-unit-10{
	
    background: url(images/3.png);
    background-size: 100%;}
						.lottery-unit-0{
	
    background: url(images/4.png);
    background-size: 100%;}
						.lottery-unit-7{

    background: url(images/3.png);
    background-size: 100%;}
						.lottery-unit-6{
	 
    background: url(images/1.png);
    background-size: 100%;}.active{    background-color: red;}
        </style>
    </head>
    <body>
       
       

           
             <div id="lottery" prize_site="11" prize_id="12" prize_name="十二等奖"><!--- ←←←←←←临时测试-->
                <!-- 提交后台 返回数据前端重新生成 ↓↓↓↓↓↓↓↓
					<div id="lottery">
					-->
					 <div class="lottery-unit lottery-unit-0"></div>
                   <div class="lottery-unit lottery-unit-1"></div>
				    <div class="lottery-unit lottery-unit-2"></div>
					 <div class="lottery-unit lottery-unit-3"></div>
					  <div class="lottery-unit lottery-unit-11"></div>
					  <div class="lottery-unit lottery-unit-no-gif"></div>
					  <div class="lottery-unit lottery-unit-no-gif"></div>
					  <div class="lottery-unit lottery-unit-4"></div>
					  
					  
					  <div class="lottery-unit lottery-unit-10"></div>
					
					  <div class="lottery-unit lottery-unit-no-gif"></div>
					   <div class="lottery-unit lottery-unit-no-gif"></div> 
					     
						 
						 <div class="lottery-unit lottery-unit-5"></div>
					   <div class="lottery-unit lottery-unit-9"></div>
					   <div class="lottery-unit lottery-unit-8"></div>
					   <div class="lottery-unit lottery-unit-7"></div>
					   
					   <div class="lottery-unit lottery-unit-6"></div>
					   
					  
                </div>
        
       
       
        
        <script type="text/javascript">
            var lottery = {
                index: 0, //当前转动到哪个位置，起点位置
                count: 0, //总共有多少个位置
                timer: 0, //setTimeout的ID，用clearTimeout清除
                speed: 20, //初始转动速度
                times: 0, //转动次数
                cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
                prize: 0, //中奖位置
                init: function(id) {
                    if ($("#" + id).find(".lottery-unit").length > 0) {
                        $lottery = $("#" + id);
                        $units = $lottery.find(".lottery-unit");
                        this.obj = $lottery;
                        this.count = $units.length;
                        $lottery.find(".lottery-unit-" + this.index).addClass("active");
                    }
                },
                roll: function() {
                    var index = this.index;
                    var count = this.count;
                    var lottery = this.obj;
                    $(lottery).find(".lottery-unit-" + index).removeClass("active");
                    index += 1;
                    if (index > count - 1) {
                        index = 0;
                    }
                    $(lottery).find(".lottery-unit-" + index).addClass("active");
                    this.index = index;
                    return false;
                },
                stop: function(index) {
                    this.prize = index;
                    return false;
                }
            };

            function roll() {
                lottery.times += 1;
                lottery.roll();
                var prize_site = $("#lottery").attr("prize_site");
                if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) {
                    var prize_id = $("#lottery").attr("prize_id");
                    var prize_name = $("#lottery").attr("prize_name");
                    alert("前端中奖位置："+prize_site+"\n"+"中奖名称："+prize_name+"\n中奖id："+prize_id)
                    clearTimeout(lottery.timer);
                    lottery.prize = -1;
                    lottery.times = 0;
                    click = false;

                } else {
                    if (lottery.times < lottery.cycle) {
                        lottery.speed -= 10;
                    } else if (lottery.times == lottery.cycle) {
                        var index = Math.random() * (lottery.count) | 0;
                        lottery.prize = index;
                    } else {
                        if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                            lottery.speed += 110;
                        } else {
                            lottery.speed += 20;
                        }
                    }
                    if (lottery.speed < 40) {
                        lottery.speed = 40;
                    }
                    lottery.timer = setTimeout(roll, lottery.speed);
                }
                return false;
            }

            var click = false;

            $(function() {
                lottery.init('lottery');
                $(".lottery-unit-no-gif").click(function() {
					//alert('fdsafdasf');
                     if (click) {
                        return false;
                    } else {
                        lottery.speed = 100;
						
						/*提交后台中奖算法
                        $.post("ajax.php", {uid: 1}, function(data) { //获取奖品，也可以在这里判断是否登陆状态
                            $("#lottery").attr("prize_site", data.prize_site);
                            $("#lottery").attr("prize_id", data.prize_id);
                            $("#lottery").attr("prize_name", data.prize_name);
                            roll();
                            click = true;
                            return false;
                        }, "json")
						后台end*/
						
								//临时测试
								roll();
								click = true;
								return false;
								//end
                    }
                });
            })
        </script>
    </body>
</html>

Run code

Cut to clipboard

代码二：ajax提交到后台，返回中奖json

<!DOCTYPE html>
<html>
<head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
        <title>演示：PHP+jQuery+Ajax九宫格抽奖转盘</title>
               <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="format-detection" content="telephone=no" /> 
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.0/jquery.min.js"></script>

   <script>
		var nwwitdh=$(window).width();
		/*
		window.screen.width 是指屏幕分辨率的宽度；
		$(window).width() 是指浏览器可视窗口的宽度；
		*/
		//var nhheight=$(window).height();
		document.write("<style>#lottery{height:"+nwwitdh+"px;}</style>");
   </script>
        <style type="text/css">
		*{padding:0px;margin:0px;}
		html,body{min-height:100%;min-width:100%;}
#lottery{background:red url(images/bg.jpg) no-repeat;    
    background-size: 100%;}
	.lottery-unit {
		    width: 25%;
    height: 25%;
	float: left;
	}
	.lottery-unit-no-gif{
	  background: url(images/no.gif);
    background-size: 100%;
	}
	.lottery-unit-1{

    background: url(images/1.png);
    background-size: 100%;}
		.lottery-unit-2{

    background: url(images/2.png);
    background-size: 100%;}
		.lottery-unit-3{

    background: url(images/3.png);
    background-size: 100%;}
		.lottery-unit-4{

    background: url(images/4.png);
    background-size: 100%;}
	
			.lottery-unit-5{

    background: url(images/5.png);
    background-size: 100%;}
		
			.lottery-unit-8{

    background: url(images/8.png);
    background-size: 100%;}
	
				.lottery-unit-9{
	
    background: url(images/6.png);
    background-size: 100%;}
	
	
					.lottery-unit-11{

    background: url(images/6.png);
    background-size: 100%;}
	
	
						.lottery-unit-10{
	
    background: url(images/3.png);
    background-size: 100%;}
						.lottery-unit-0{
	
    background: url(images/4.png);
    background-size: 100%;}
						.lottery-unit-7{

    background: url(images/3.png);
    background-size: 100%;}
						.lottery-unit-6{
	 
    background: url(images/1.png);
    background-size: 100%;}.active{    background-color: red;}
        </style>
    </head>
    <body>
       
       

           
             
                <div id="lottery">
					 <div class="lottery-unit lottery-unit-0"></div>
                   <div class="lottery-unit lottery-unit-1"></div>
				    <div class="lottery-unit lottery-unit-2"></div>
					 <div class="lottery-unit lottery-unit-3"></div>
					  <div class="lottery-unit lottery-unit-11"></div>
					  <div class="lottery-unit lottery-unit-no-gif"></div>
					  <div class="lottery-unit lottery-unit-no-gif"></div>
					  <div class="lottery-unit lottery-unit-4"></div>
					  
					  
					  <div class="lottery-unit lottery-unit-10"></div>
					
					  <div class="lottery-unit lottery-unit-no-gif"></div>
					   <div class="lottery-unit lottery-unit-no-gif"></div> 
					     
						 
						 <div class="lottery-unit lottery-unit-5"></div>
					   <div class="lottery-unit lottery-unit-9"></div>
					   <div class="lottery-unit lottery-unit-8"></div>
					   <div class="lottery-unit lottery-unit-7"></div>
					   
					   <div class="lottery-unit lottery-unit-6"></div>
					   
					  
                </div>
        
       
       
        
        <script type="text/javascript">
            var lottery = {
                index: 0, //当前转动到哪个位置，起点位置
                count: 0, //总共有多少个位置
                timer: 0, //setTimeout的ID，用clearTimeout清除
                speed: 20, //初始转动速度
                times: 0, //转动次数
                cycle: 50, //转动基本次数：即至少需要转动多少次再进入抽奖环节
                prize: 0, //中奖位置
                init: function(id) {
                    if ($("#" + id).find(".lottery-unit").length > 0) {
                        $lottery = $("#" + id);
                        $units = $lottery.find(".lottery-unit");
                        this.obj = $lottery;
                        this.count = $units.length;
                        $lottery.find(".lottery-unit-" + this.index).addClass("active");
                    }
                },
                roll: function() {
                    var index = this.index;
                    var count = this.count;
                    var lottery = this.obj;
                    $(lottery).find(".lottery-unit-" + index).removeClass("active");
                    index += 1;
                    if (index > count - 1) {
                        index = 0;
                    }
                    $(lottery).find(".lottery-unit-" + index).addClass("active");
                    this.index = index;
                    return false;
                },
                stop: function(index) {
                    this.prize = index;
                    return false;
                }
            };

            function roll() {
                lottery.times += 1;
                lottery.roll();
                var prize_site = $("#lottery").attr("prize_site");
                if (lottery.times > lottery.cycle + 10 && lottery.index == prize_site) {
                    var prize_id = $("#lottery").attr("prize_id");
                    var prize_name = $("#lottery").attr("prize_name");
                    alert("前端中奖位置："+prize_site+"\n"+"中奖名称："+prize_name+"\n中奖id："+prize_id)
                    clearTimeout(lottery.timer);
                    lottery.prize = -1;
                    lottery.times = 0;
                    click = false;

                } else {
                    if (lottery.times < lottery.cycle) {
                        lottery.speed -= 10;
                    } else if (lottery.times == lottery.cycle) {
                        var index = Math.random() * (lottery.count) | 0;
                        lottery.prize = index;
                    } else {
                        if (lottery.times > lottery.cycle + 10 && ((lottery.prize == 0 && lottery.index == 7) || lottery.prize == lottery.index + 1)) {
                            lottery.speed += 110;
                        } else {
                            lottery.speed += 20;
                        }
                    }
                    if (lottery.speed < 40) {
                        lottery.speed = 40;
                    }
                    lottery.timer = setTimeout(roll, lottery.speed);
                }
                return false;
            }

            var click = false;

            $(function() {
                lottery.init('lottery');
                $(".lottery-unit-no-gif").click(function() {
					//alert('fdsafdasf');
                     if (click) {
                        return false;
                    } else {
                        lottery.speed = 100;
                        $.post("ajax.php", {uid: 1}, function(data) { //获取奖品，也可以在这里判断是否登陆状态
                            $("#lottery").attr("prize_site", data.prize_site);
                            $("#lottery").attr("prize_id", data.prize_id);
                            $("#lottery").attr("prize_name", data.prize_name);
                            roll();
                            click = true;
                            return false;
                        }, "json")
                    }
                });
            })
        </script>
    </body>
</html>

Run code

Cut to clipboard

适配移动端附件：upload/attach/tbs-HaXNcqh0qq.rar
PC端未修改代码
PHP+jQuery+Ajax九宫格抽奖转盘
附件：upload/attach/tbs-qSrPNGAh1Y.zip
html5手机移动端大转盘抽奖代码
附件：upload/attach/tbs-Qz4JIdLTr9.rar
新跑马灯背景抽奖手机移动设备自适应适配新代码包
附件：upload/attach/tbs-Dqfjy80c5R.com.rar

参考 http://www.sucaihuo.com/js/129.html

Run code

Cut to clipboard

lizhenqiu blog

手机移动端网站九宫格抽奖代码PHP+jQuery+Ajax九宫格抽奖转盘

相关日志

暂无评论 »

留下評論