自定义顺序/九宫格抽奖

效果

唠叨

用一个数组决定外发光边框停留的顺序
取一个随机数，加上之前定好的圈数*盲盒个数，确认最后的奖品是哪个（随机数可后端返回）
根据变换定时的时间，改变每一圈运动的速度
注意：排序的数组和最后奖品间的关系，在下面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="https://cdn.bootcdn.net/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>

自定义顺序/九宫格抽奖相关推荐

Vue3实现九宫格抽奖效果
前言好久没有写文章了,上一次发文还是年终总结,眨眼间又是一年,每每想多总结却是坚持不来,难顶. 这次分享一个九宫格抽奖小游戏,缘起是最近公司内部做积分抽奖需求,抽出其中抽奖动效做一个总结,从零实现 ...
九宫格抽奖转盘源码分析
效果如上图所示,下面对其实现代码进行分析,看能不能破解其抽奖规则.需要引入jquery-1.8.3.min.js和images/9张图片. <!DOCTYPE html PUBLIC ...
九宫格抽奖V1.3.26正版
简介: 版本号:1.3.26 –九宫格抽奖 1.增加活动内粉丝列表直接修改积分/余额的功能: 2.修复手台手动发送积分/余额时无法到账的问题. 1.支持多活动同时进行,互不影响: 2.可设置每天可抽奖 ...
原生js实现九宫格抽奖
预览效果完整代码留意注释文字的解释.记得更换图片. <!DOCTYPE html> <html> <head> <meta name="view ...
[JavaScript学习-01]JavaScript实现九宫格抽奖
效果: <!DOCTYPE html> <html> <head> <meta name="viewport" content=" ...
php九宫格抽奖程序源码
php九宫格抽奖程序源码,可设置背景音乐,可设置中奖概率,可以设置奖项,可设置抽奖码指定中奖. 源码介绍 2种抽奖模式: 1.先登记资料,然后后抽奖, 2.匿名(无需登记,直接抽奖) 支持奖品数量:8 ...
基于Canvas的九宫格抽奖，就是仿csdn的APP做的，能过审不？
引言: 九宫格抽奖一直就挺火爆,手机端也经常用,这不来了兴趣写了一波,看着效果还不错,拿出来大家唠唠! 效果: 实现思路绘制出背景大图,两张图片,一张稍微小,并且稍小的图片颜色更深一些: 绘制8张白 ...
Flutter 实现九宫格抽奖动画效果
一.本文实现的九宫格抽奖动画效果如下二.主要分享下怎么一步一步来实现这个效果源代码地址布局可以通过GridView轻松实现,只需在数据源的第五个位置插入一个元素用来标识是开始按钮抽奖动画的实现 ...
618活动九宫格抽奖
项目场景: 九宫格抽奖关键点: <ul class="prize_ul"><li class="prize_li" v-for="( ...

自定义顺序/九宫格抽奖

效果

唠叨

代码

自定义顺序/九宫格抽奖相关推荐

最新文章

热门文章