index.html
3
1679$(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 = $('');
var $fragEle = $('');
$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的
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
这个应该是请求后端得到抽奖结果，在前端js实现抽奖结果显示；后端就是是对数据库操作了
这个需要自己设计数据库，和后端链接起来使用，这个只有前端