效果
唠叨
用一个数组决定外发光边框停留的顺序取一个随机数，加上之前定好的圈数*盲盒个数，确认最后的奖品是哪个（随机数可后端返回）根据变换定时的时间，改变每一圈运动的速度注意：排序的数组和最后奖品间的关系，在下面script标签里的positionId后面有解释代码
抽奖逻辑是之前网上找的，有一些更改，时间有点久，忘了在哪找到的了
<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no, viewport-fit=cover" /><title>九宫格抽奖</title><script>(function() {var _width = 750;var ua = navigator.userAgent;if (/Android (\d+\.\d+)/.test(ua)) {var version = parseFloat(RegExp.$1);if (version > 2.3) {document.write('<meta name="viewport" content="width=' + _width +',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')} else {document.write('<meta name="viewport" content="width=' + _width +',target-densitydpi=device-dpi">')}} else if (/QQAC_Client_iOS/.test(ua)) {document.write('<meta name="viewport" content="width=' + _width +',maximum-scale=0.5,minimum-scale=0.5">');} else {document.write('<meta name="viewport" content="width=' + _width +',user-scalable=no,target-densitydpi=device-dpi,minimal-ui">')}})();</script><style>.mod_center {position: absolute;left: 0;right: 0;margin: 0 auto;}.Pplay_box {position: absolute;left: 0;top: 11px;width: 750px;height: 1195px;box-shadow: inset 0 0 10px 10px rgba(255, 0, 0, .4),0px 9px 6px 2px rgb(191, 101, 101, .4);}.Pplay_box_main {position: absolute;left: 66px;top: 290px;width: 428px;height: 734px;border: 1px solid red;box-shadow: inset 0 0 10px 10px rgba(255, 0, 0, .4);}.Pplay_box_main_box {position: absolute;left: 26px;top: 36px;width: 373px;height: 621px;border: 1px solid red;box-shadow: 0px 9px 6px 2px rgb(191, 101, 101, .4);}.Pplay_box_title {top: 110px;width: 624px;height: 114px;font-family: 'syh';font-size: 64px;}.Pplay_box_title_txt {position: absolute;left: 0;top: 0;width: 100%;height: 100%;text-align: center;}.Pplay_box_title_txt1 {color: #fec4a0;opacity: .3;text-shadow: 0 0 20px #fff3d5;}.Pplay_box_title_txt2 {color: #fff;text-shadow: 0 0 20px #fff3d5;}.Pplay_box_title_txt3 {color: #fe3900;text-shadow: 0 0 20px #f00,0 0 6px #f61a00,0 0 16px #650606;}/* 九个盲盒的位置 */.pbmb_item {position: absolute;width: 110px;height: 110px;background-size: 100px 99px;box-shadow: inset 0 0 10px 10px rgba(255, 0, 0, .4);}.pbmb_item_col1 {left: 10px;}.pbmb_item_col2 {left: 133px;}.pbmb_item_col3 {left: 254px;}.pbmb_item_row1 {top: 60px;}.pbmb_item_row2 {top: 262px;}.pbmb_item_row3 {top: 456px;}.pbmb_item_light {position: absolute;left: 0;top: 0;width: 100%;height: 100%;border-radius: 20px;box-shadow: inset 0 0 20px 10px #FF576D,inset 0 0 10px 6px #fff;}.Pplay_box_main_glass {position: absolute;left: -12px;top: 22px;width: 495px;height: 694px;}.Pplay_box_main_drop {position: absolute;left: 488px;top: 616px;width: 100px;height: 99px;}.Pplay_box_main_number {position: absolute;left: 486px;top: 50px;width: 124px;height: 238px;text-align: center;}.Pplay_box_main_number span {display: block;width: 24px;margin: 0 auto;height: auto;font-size: 24px;line-height: 24px;text-align: center;}#pbmn_number {width: 124px;font-size: 42px;line-height: 50px;color: #f6a14c;}.Pplay_box_playNow {position: absolute;left: 504px;top: 460px;width: 104px;height: 104px;background: pink;box-shadow: 4px 6px 6px 2px rgb(191, 101, 101, .4);line-height: 96px;text-align: center;font-size: 40px;font-weight: bold;color: #fff;text-shadow: 1px 2px 6px red;}</style></head><body><div class="Pplay_box"><div class="mod_center Pplay_box_title"><div class="Pplay_box_title_txt Pplay_box_title_txt3 shine">盲盒抽奖</div><div class="Pplay_box_title_txt Pplay_box_title_txt2">盲盒抽奖</div><div class="Pplay_box_title_txt Pplay_box_title_txt1">盲盒抽奖</div></div><div class="Pplay_box_main"><div class="Pplay_box_main_box"><div class="pbmb_item pbmb_item1 pbmb_item_row1 pbmb_item_col1"><div class="pbmb_item_light" style="display:none;"></div></div><div class="pbmb_item pbmb_item2 pbmb_item_row1 pbmb_item_col2"><div class="pbmb_item_light" style="display:none;"></div></div><div class="pbmb_item pbmb_item3 pbmb_item_row1 pbmb_item_col3"><div class="pbmb_item_light" style="display:none;"></div></div><div class="pbmb_item pbmb_item4 pbmb_item_row2 pbmb_item_col1"><div class="pbmb_item_light" style="display:none;"></div></div><div class="pbmb_item pbmb_item5 pbmb_item_row2 pbmb_item_col2"><div class="pbmb_item_light" style="display:none;"></div></div><div class="pbmb_item pbmb_item6 pbmb_item_row2 pbmb_item_col3"><div class="pbmb_item_light" style="display:none;"></div></div><div class="pbmb_item pbmb_item7 pbmb_item_row3 pbmb_item_col1"><div class="pbmb_item_light" style="display:none;"></div></div><div class="pbmb_item pbmb_item8 pbmb_item_row3 pbmb_item_col2"><div class="pbmb_item_light" style="display:none;"></div></div><div class="pbmb_item pbmb_item9 pbmb_item_row3 pbmb_item_col3"><div class="pbmb_item_light" style="display:none;"></div></div></div><!-- /盲盒的九个盒子 --><div class="Pplay_box_playNow">抽</div><div class="Pplay_box_main_number"><span>您还有</span><span class="pbmn_number" id="pbmn_number">100</span><span>次机会</span></div></div></div></body><script src="/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>/* * 盲盒游戏页，抽奖*/let item = $('.pbmb_item'),timer = null,bReady = true, //定义一个抽奖开关prize = [0, 1, 2, 3, 4, 5, 6, 7, 8], //奖品标签滚动的顺序,可随意定义，需要注意的是最后奖品的排序和这个顺序是一致的，比如排序为【0,1,2,5,4,3,6,7,8】，positionId为4时抽中的是数组里第四位数，即下标为5的盲盒positionId = 0, //positionId用来存放得到的随机数，也就是抽中的奖品，一般由后端返回，在这里先随机一个game_count; //剩余游戏次数，一开始由ajax获取，在每天分享后有一次增加的机会$('.Pplay_box_playNow').on('click', function() {game_count = $('#pbmn_number').text();if (bReady) {if (game_count > 0) {$(this).css({'left': '508px','top': '466px','boxShadow':'inset 0 0 6px 2px rgb(191, 101, 101, 0.4)'}); //按钮按下效果bReady = false;$('#pbmn_number').text($('#pbmn_number').text() - 1); //次数-1game_count -= 1;positionId = getrandomnum(1, 10);startinit(positionId); //执行抽奖初始化} else if (game_count == 0) {console.log('次数没了');}}})//随机数function getrandomnum(n, m) {return parseInt((m - n) * Math.random() + n);}//抽奖初始化function startinit(positionId) {let i = 0, //定义一个i 用来计算抽奖跑动的总次数t = 50, //抽奖跑动的速度 初始为50毫秒rounds = 2, //抽奖转动的圈数rNum = rounds * 9; //标记跑动的次数timer = setTimeout(startscroll, t); //每t毫秒执行startscroll函数//抽奖滚动的函数function startscroll() {//每次滚动抽奖将所有盲盒发光外框都隐藏$('.pbmb_item_light').hide();var prizenum = prize[i % item.length]; //通过i余8得到此刻在prize数组中的数字，该数字就是外发光边框出现的位置$('.pbmb_item:nth(' + prizenum + ') .pbmb_item_light').show();i++;if (i < 9) {//第一圈timer = setTimeout(startscroll, t);} else if (i < rNum - 9) {//第二圈，速度慢点timer = setTimeout(startscroll, t*2);} else if (i >= rNum - 9 && i < rNum + positionId) {//第三圈，速度再慢t += (i - rNum + 9) * 5;timer = setTimeout(startscroll, t);}if (i >= rNum + positionId) {//计时器结束，结果出现console.log('抽中了' + positionId);$('.Pplay_box_playNow').css({'left': '504px','top': '460px','boxShadow':'4px 6px 6px 2px rgb(191, 101, 101, .4)'}); //按钮弹回可按的效果bReady = true; //当计时器结束后让按钮变为可抽奖状态clearTimeout(timer);}}}</script></html>
