jquery实现一个点名抽奖效果代码-html代码-BFW代码库

代码语言：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.........完整代码请登录后点击上方下载按钮下载查看