可控抽奖
Posted daifuchao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了可控抽奖相关的知识，希望对你有一定的参考价值。
<!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库，有两个音频，一个是未点击抽奖时的背景音乐，另一个是揭晓抽中倒计时的背景音乐，可以控制几号被抽中，也可以控制几号不被抽中，代码注释的地方可以调试。
以上是关于可控抽奖的主要内容，如果未能解决你的问题，请参考以下文章