jq随机点名器

jQuery默认设置抽奖名额，点击点名抽奖按钮，随机点名，随机名字抽奖特效。 名字可以更换，我的是网上找的

css代码

<style>
	body{background-color: #212121}
	.main{
		width: 600px;
		height: 576px;
		background:url('img/bg.png');
		margin: 80px auto;
	}
	.text{
		width: 180px;
		height: 100px;
		color: #fff;
		font-weight:bold;
		font-size: 58px;
		margin:110px 380px auto;
		text-align: center;
		cursor: pointer;
	}
	.button{
		width: 180px;
		height: 100px;
		color: #fff;
		font-weight:bold;
		font-size: 58px;
		position: relative;
		left: 50px;
		top: 210px;
		text-align: center;
		cursor: pointer;
		/*background: #666;*/
	}
	.name{
		position: relative;
		/*background: #999;*/
		left: 140px;
		top: 120px;
		width: 280px;
		height: 100px;
		color:#9fc;
		font-weight:bold;
		font-size: 58px;
		text-align: center;
	}
</style>

这个是用到的背景图片

html代码

<div class="main">
	<div class="button"><span>开始</span></div>
	<div class="text">点名</div>
	<div class="name"><span id='ko'>开心</span></div>
</div>

jq代码 ： 记得引入jq文件才可以哦

<script src="js/jquery.js"></script>
<script src="js/jquery-migrate-1.2.1.min.js"></script>
<script>
 names=['阿峰','阿慧','阿静','开心','艾艾','爱爱','丫丫','安安','安琪','昂昂','彬彬','斌斌','冰冰','兵兵','超超','波波','淙淙','琮琮','鲁鲁','朗朗','娟娟','菁菁','娇娇','帆帆','菲菲'];
 $('.button').toggle(
	function(){
		//alert(names.length);
	$(this).css({'color':'#f00'}).html('停止');
	ydm=setInterval(function(){
	index=Math.floor(Math.random()*names.length);
	val=names[index];
	$('#ko').css({'color':'#9fc'}).html(val);
	},50)},
	function(){
		$(this).css({'color':'#fff'}).html('开始');
		$('#ko').css({'color':'#f00'});
		clearInterval(ydm);
	}
 );
</script>