<!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
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Cela devrait demander au backend d'obtenir les résultats de la loterie et implémenter l'affichage des résultats de la loterie dans le js frontal, le backend doit faire fonctionner la base de données ;
Cela vous oblige à concevoir votre propre base de données et à la lier au back-end pour l'utiliser. Cela n'a que le front-end.