jquery实现一个点名抽奖效果代码
代码语言:html
所属分类:其他
代码描述:jquery实现一个点名抽奖效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/bootstrap.4.3.1.min.css"> </head> <body> <div class="container"> <!-- 选择框 --> <div class="form-group"> <select class="form-control" id="sel"> <option>请选择班级</option> </select> <br> </div> <div style="text-align: center; margin: 15px;" id="play" class="play"> </div> <!-- 数据 --> <div style="width: 100%;height: 100%;"> <ul class="list-group justify-content-center row row-cols-1 row-cols-sm-2 row-cols-md-6 list-group-horizontal" id="list-group"> <!-- <li class="list-group-item ">Active item</li> --> </ul> </div> <!-- 按钮 --> <div id='buttons' style="text-align: center;display: none;"> <button type="button" id="btn1" class="btn btn-primary">开始</button> <button type="button" id="btn2" class="btn btn-secondary">确定</button> </div> </div> <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/jquery-3.2.1.min.js"></script> <script> var data={ '206班':['蔡海婷','陈俊宇','陈树旺','范家渝','黄洁冰','黄丽玲','黄梅莲','黄梅艳','黄铭乐','黄楠媚','黄淇','黄琼萍','黄锐丽','黄诗静','黄诗云', ], '207班':['卜彩媚','岑禹廷','陈媛媛','陈月兰','程菲','程金婷','邓海韵','邓满超','邓明欣','方焕生','甘海兰','甘海全', '甘焕玉','甘洁芬','高晓茵','光钧泉','郭彩燕','郭日焕' ], '208班':[ '蔡广美','蔡华莹','蔡勇浩','曹新怡','曹雨轩', '岑林峰','曾春丽','曾德芳','曾恩雅','曾海灵','曾桦标','曾锦华' ], '211班':[ '曾思宁','陈福健','陈洁华','陈金怡','陈连心','陈秋颖','陈小漫','陈永甲','邓敏丽','何彬彬','胡秋梅', '黄德华','黄桂德','黄海东','黄海伦','黄焕媚','黄佳欣','黄家雯','黄嘉欣','黄梅丽','黄显龙','黄晓华','黄咏岚','黄政锋','黎荣华','黎晓童','李燕萍', ], '212班':[ '蔡昀飞','曾圣华','曾诗华', '曾依雯','陈炳雄','陈惠玲','陈火英','陈明珍','陈天泽','陈烨坤' ] } var play=['天选之人---','这就不可能是我好吧!!!','不是我!!!不是我!!!!', '下一个下一个!!!','嗯嗯嗯嗯额!!!','不可能是我的吧!!!','没问题的,没问题的!', '就不可能是我好吧','选不到我,选不到我!!','停下吧,心忐忑忐忑的!!!','这要是能选到我那就怪了!!!', '晕,还不停吗!!','不能吧','等的好累!!','嗯????','只有这时候我不想当天选之人','有画面了,有画面了','还好不是我哎','好好学习,天天向上', '此刻,我想好好学习!!!','哎,二氧化碳','少玩手机多学习','保护好眼睛','听老师的话,老师都是过来人','再也不怕跟老师对上眼喊我回答问题','对错没关系','现在是天选之人,以后也会是天选之人' ,'成功其实很简单,就是当你坚持不住的时候,再坚持一下','to young to simple','不要整天TIMI!!!!','你要好好学习呀','越努力越优秀!!','就决定是你了!!','我保证现在不是心动,是忐忑!!!' ] var data = data let this_ = this let currData; /* 主轮询器对象 */ let interval; let funInterval /* 提示的轮询器*/ let playFun=function(){ if(play.length>0){ $("#play").empty(); let n1 = Math.random() let index = Math.floor(n1*(play.length-1)); if(index==0){ index=1 } $("#play").append("<p>" + play[index] + "</p>"); } } let interval2; $(document).ready(function() { $("#btn2").hide() jQuery.each(data, function(key, val) { $("#sel").append("<option value='" + key + "'>" + key + "</o.........完整代码请登录后点击上方下载按钮下载查看
网友评论0