首页 >社区问答列表 >这个游戏如何连接上数据库的数据呢?

这个游戏如何连接上数据库的数据呢?

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2018年笑各购启动大会抽奖活动</title>
    <link rel="stylesheet" data-href="index.css" media="screen" type="text/css">
</head>
<body>
<div class="container none"></div>
<div class="mask"></div>
<div id="stop" class="btn_circle none">停止</div>
<div class="lucky_title">2018年笑各购启动大会抽奖活动</div>
<div class="loader_file">
    用户数据导入中 <span class="current_number"></span><span class="all_number"></span>
</div>
<div class="lucky_list clearfix">
    <div class="left lucky_prize">
        <div class="lucky_prize_box">
            <button class="lucky_prize_left lucky_prize_direction"><</button>
            <div data-default="1" class="lucky_prize_picture">
                <img class="lucky_prize_show none"
                     src="img/bXshiKc7Z2mQusImhSzC33czcBci3K.png"
                     alt="一等奖笔记本"/>
                <img class="none lucky_prize_show"
                     src="img/szSy9dU21WZnSdGwP9tE533ntEd1WE.png"
                     alt="二等奖平衡车"/>
                <img class="none lucky_prize_show"
                     src="img/gLz4H2xZ8XxkXlDDGdd8Fd2xF35kjX.png"
                     alt="三等奖现金红包"/>
            </div>
            <button class="lucky_prize_right active lucky_prize_direction">></button>
        </div>
        <div class="lucky_prize_title">一等奖笔记本</div>
        <div class="lucky_setting">
            <span>
                <b class="lucky_number">998</b>
                人参与
            </span>

            <div class="select_box">
                一次抽
                <select name="select_lucky_number" class='select_lucky_number'>
                    <option selected = "selected" value="1">1</option>
                    <option value="2">2</option>
                    <option value="6">6</option>
                    <option value="15">15</option>
                </select>
                人
            </div>
        </div>
        <div id="open" class="btn_circle btn_start">开始</div>
    </div>
    <div class="right lucky_people_list">
        <div class="lucky_people_title">中奖名单</div>
        <div class="lpl_list clearfix none">
            <!--<div class="lpl_userInfo">-->
            <!--<img class="lpl_userImage" src="wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTK9YW8jiaJuo8xHZohXgpMpzVCWleDx4ko9zLn5B8iavAR2yQpeLMR5BQjf2jicwcGURXq5xf4yguwIQ/132"-->
            <!--alt=""/>-->
            <!--<p class="lpl_userName">小木姐姐</p>-->
            <!--</div>-->
        </div>
        <div class="lpl_list clearfix none">

        </div>
        <div class="lpl_list clearfix none">

        </div>
    </div>
</div>
</body>
<script src="www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script type="text/javascript" src='js/transform.js'></script>
<script type="text/javascript" src='js/tick.js'></script>
<!--data为静态数据 如用ajax获取请取消输入引入-->
<!--抽奖动画-->
<script type="text/javascript" src='js/3d.js'></script>
<!--实际抽奖逻辑代码-->
<script type="text/javascript" src='js/lucky.js'></script>
<!-- ajax抽奖逻辑 -->
 <script type="text/javascript" src='js/ajaxLucky.js'></script> 
<!--<script type="text/javascript" src = "js/data.js"></script>-->

</html>

index.html

$(function () {
    /*
     luckyNum为每次抽几人
     luckyResult为抽奖结果的集合(数组)
     luckyNum为5那么luckyResult的length也为5
     */
    var Obj = {};
    Obj.luckyResult = [];
    Obj.luckyPrize = '';
    Obj.luckyNum = $(".select_lucky_number").val();
    /*
     一次抽几人改变事件
     */
    $(".select_lucky_number").bind('change', function () {
        Obj.luckyNum = $(this).val();
    })
    /*
     图片预加载
     */
    function loadImage(arr, callback) {
        var loadImageLen = 1;
        var arrLen = arr.length;
        $('.all_number').html("/" + arrLen);
        for (var i = 0; i < arrLen; i++) {
            var img = new Image(); //创建一个Image对象,实现图片的预下载
            img.onload = function () {
                img.onload = null;
                ++loadImageLen;
                $(".current_number").html(loadImageLen);
                if (loadImageLen == arrLen) {
                    callback(img); //所有图片加载成功回调;
                }
                ;
            }
            img.src = arr[i].image;
        }
    }
    
    
     //若为ajax请求执行这段代码
     //此为为ajax请求;
     $.get('2.php',function(data){
         if(data.res == 1){
             personArray = data.data; //此为数组
             loadImage(personArray, function (img) {
                $('.loader_file').hide();
            })
             Obj.M = $('.container').lucky({
             row : 7, //每排显示个数  必须为奇数
             col : 7, //每列显示个数  必须为奇数
             depth : 6, //纵深度
             iconW : 30, //图片的宽
             iconH : 30, //图片的高
             iconRadius : 8, //图片的圆角
             data : personArray, //数据的地址数组
         });
         }
     },'json');
     

    /*
     中奖人员展示效果
     传入当前中奖数组中单个的key
     */
    function showLuckyPeople(num) {
        setTimeout(function () {
            var $luckyEle = $('<img class="lucky_icon" />');
            var $userName = $('<p class="lucky_userName"></p>');
            var $fragEle = $('<div class="lucky_userInfo"></div>');
            $fragEle.append($luckyEle, $userName);
            $('.mask').append($fragEle);
            $(".mask").fadeIn(200);
            $luckyEle.attr('src', personArray[Obj.luckyResult[num]].image);
            $userName.text(personArray[Obj.luckyResult[num]].name)
            $fragEle.animate({
                'left': '50%',
                'top': '50%',
                'height': '200px',
                'width': '200px',
                'margin-left': '-100px',
                'margin-top': '-100px',
            }, 1000, function () {
                setTimeout(function () {
                    $fragEle.animate({
                        'height': '100px',
                        'width': '100px',
                        'margin-left': '100px',
                        'margin-top': '-50px',
                    }, 400, function () {
                        $(".mask").fadeOut(0);
                        $luckyEle.attr('class', 'lpl_userImage').attr('style', '');
                        $userName.attr('class', 'lpl_userName').attr('style', '');
                        $fragEle.attr('class', 'lpl_userInfo').attr('style', '');
                        $('.lpl_list.active').append($fragEle);
                    })
                }, 1000)
            })
        }, num * 2500)
        setTimeout(function () {
            $('.lucky_list').show();
        }, 2500)
    }

    /*
     停止按钮事件函数
     */
    $('#stop').click(function () {
        Obj.M.stop();
        $(".container").hide();
        $(this).hide();
        var i = 0;
        for (; i < Obj.luckyResult.length; i++) {
            showLuckyPeople(i);
        }

    })
    /*
     开始按钮事件函数
     */
    $('#open').click(function () {
        $('.lucky_list').hide();
        $(".container").show();
        Obj.M.open();
        //此为ajax请求获奖结果
        $.get('/lucky/index',{"lucky_num" : Obj.luckyNum,"lucky_prize":Obj.luckyPrize},function(data){
        	  if(data.res == 1){
        		  Obj.luckyResult = data.luckyResult;
               $("#stop").show(500);
        	  }
        },'json')
        //ajax获奖结果结束
    })
    /*
     切换奖品代码块
     */
    function tabPrize() {
        var luckyDefalut = $(".lucky_prize_picture").attr('data-default');
        var index = luckyDefalut ? luckyDefalut : 1;
        tabSport(index);
        var lucky_prize_number = $('.lucky_prize_show').length;
        $('.lucky_prize_left').click(function () {
            $('.lucky_prize_right').addClass('active');
            index <= 1 ? 1 : --index;
            tabSport(index, lucky_prize_number);
        })
        $('.lucky_prize_right').click(function () {
            $('.lucky_prize_left').addClass('active');
            index >= lucky_prize_number ? lucky_prize_number : ++index;
            tabSport(index, lucky_prize_number);
        })

    }

    /*
     切换奖品左右按钮公共模块
     */
    function tabSport(i, lucky_prize_number) {
        if (i >= lucky_prize_number) {
            $('.lucky_prize_right').removeClass('active');
        }
        if (i <= 1) {
            $('.lucky_prize_left').removeClass('active');
        }
        Obj.luckyPrize = i;
        $('.lucky_prize_show').hide().eq(i - 1).show();
        $(".lucky_prize_title").html($('.lucky_prize_show').eq(i - 1).attr('alt'));
        $('.lpl_list').removeClass('active').hide().eq(i - 1).show().addClass('active');
    }
    tabPrize();
})

js的

  • Summer
  • Summer   2018-06-15 16:02:36 2楼

    这个应该是请求后端得到抽奖结果,在前端js实现抽奖结果显示;后端就是是对数据库操作了

    +0 添加回复

  • 回复
  • 无忌哥哥
  • 无忌哥哥   2018-06-14 15:16:20 1楼

    这个需要自己设计数据库,和后端链接起来使用,这个只有前端

    +0 添加回复

  • 回复

    数据库有了 就是不知道怎么链接

    贱小球   作者 · 2018-06-14 15:30:42
    回复