可控抽奖

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<script src="js/jQuery.js"></script>
	<title>抽奖</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.titlt{
			text-align: center;
		}
		.wrap{
			position: relative;
			width: 600px;
			height: 600px;
			border: 2px solid red;
			margin:0 auto;
		}
		.wrap li{
			float: left;
			list-style: none;
			text-align: center;
			width: 60px;
			height: 60px;
			margin: 10px;
			border-radius: 50%;
			line-height: 60px;
			background-color: #ddd;
			
		}
		li.cur{
			background-color:gold;
			color: red;
			font-size:45px;
			font-weight: 900;
			
		}
		button{
			font-size: 25px;
			padding: 10px 50px;
			margin-left: 50%;
			transform: translateX(-50%);
			margin-top: 30px;
		}
		.tip{
			display: none;
			position: absolute;
			left:0;
			top:0;
			transform: translateX(-50%);
			background-color:rgba(99,99,99,0.1);
			font-size: 20px ;
			padding: 10px 15px;
			animation: xiahua linear 5s;
		}
		@-webkit-keyframes xiahua{
			from{
				top: 0;
				opacity: 1;
				left: 150px;
			}
			to{
				top: 500px;
				opacity: 0;
				left: 300px;
			}
		}
	</style>
</head>
<body>
	<h1 class="titlt">可控抽奖</h1>
	<div class="wrap" id="wrap">
		<ul></ul>
		<div class="tip" id="tip">按暂停五秒钟后揭晓中奖者！</div>
	</div>
	<audio id="music" autoplay="autoplay" loop src="audio/bgm.mp3"></audio>
	<audio id="music2" autoplay="autoplay" loop src="audio/xintiao.mp3"></audio>
	
	<script type="text/javascript">
		var color=

["#33B5E5","#0099CC","#AA66CC","#9933CC","#99CC00","#669900","#FFBB33","#FF8800","#FF4444","#CC0000"]
		var colorBg=0;
		var i;
		var t,t2;
		var j=0;
		var num=0;
		var flag=true;
		$("#music2")[0].pause();
		for(i=1;i<43;i++){
			$("#wrap ul").append('<li>'+i+'</li>')
		}
		
		$("#wrap ul").append('<button>'+'暂停'+'</button>');
		function autoPlay(){
				t=setInterval(function(){
				num=parseInt((Math.random())*42);
				//设置不会跳到几号
				if(num==25){
					//num=parseInt((Math.random())*42);
				}
				$("#wrap li").eq(num).addClass('cur').siblings().removeClass('cur');
				},30)
		}
		autoPlay();		
		$("button").click(function(){	
			if(!flag){
				flag=!flag
				$("button").html("暂停")
				autoPlay();	
				$("#music")[0].play();
			}
			else if(flag){
				flag=!flag;
				$("#music")[0].pause();
				$("#music2")[0].play();
				$("button").html("稍等······");
				$("#tip").css({"display":"block"});
				t2=setInterval(function(){
					colorBg=Math.floor( Math.random()*10);
					$("#wrap").css({"background":color[colorBg]});
				},10);				
				setTimeout(function(){
					$("#music2")[0].pause();
					$("button").html("开始");
					$("#tip").css("display","none");
					$("#wrap").css({"background":"white"});
					clearInterval(t);	
					clearInterval(t2);	
					//设置最后停在几号
					//$("#wrap li").eq(29).addClass('cur').siblings().removeClass('cur');

					$("#wrap li").eq(num).addClass('cur').siblings().removeClass('cur');
				},5000)
			}
			
		})
	</script>
</body>
</html>
　　以上是可控抽奖代码，需要引入jQuery库，有两个音频，一个是未点击抽奖时的背景音乐，另一个是揭晓抽中倒计时的背景音乐，可以控制几号被抽中，也可以控制几号不被抽中，代码注释的地方可以调试。
猜你喜欢
