<!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] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This should request the backend to get the lottery results, and implement the lottery results display in the front-end js; the backend is to operate the database
This requires you to design your own database and link it to the back-end for use. This only has the front-end.