<!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;
600px;
height: 600px;
border: 2px solid red;
margin:0 auto;
}
.wrap li{
float: left;
list-style: none;
text-align: center;
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库，有两个音频，一个是未点击抽奖时的背景音乐，另一个是揭晓抽中倒计时的背景音乐，可以控制几号被抽中，也可以控制几号不被抽中，代码注释的地方可以调试。