이 게임은 데이터베이스 데이터에 어떻게 연결되나요?
*小球
*小球 2018-06-14 14:43:27
0
3
1304
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>2018年笑各购启动大会抽奖活动</title>
    <link rel="stylesheet" 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="http://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="http://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

*小球
*小球

“……我们便结为契兄弟,在外为兄弟,在内为夫妻,可好?”——《盛世鬼》

모든 응답(2)
Summer

이는 복권 결과를 얻기 위해 백엔드를 요청해야 하며, 백엔드에서 데이터베이스를 작동하기 위해 복권 결과 표시를 구현해야 합니다.

无忌哥哥

이를 위해서는 자신만의 데이터베이스를 설계하고 이를 백엔드에 연결하여 사용해야 합니다. 여기에는 프런트엔드만 있습니다.

  • 회신하다 데이터베이스가 있지만 연결하는 방법을 모르겠습니다.
    *小球 작가 2018-06-14 15:30:42
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿