<!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
이는 복권 결과를 얻기 위해 백엔드를 요청해야 하며, 백엔드에서 데이터베이스를 작동하기 위해 복권 결과 표시를 구현해야 합니다.
이를 위해서는 자신만의 데이터베이스를 설계하고 이를 백엔드에 연결하여 사용해야 합니다. 여기에는 프런트엔드만 있습니다.