js-抽奖系统

布局

<div class="section">
　　<h3>咱们的抽奖活动要开始啦，大家准备好了吗？go go go</h3>
　　<div class="s-result">
　　</div>
　　<div class="btn">
　　</div>
</div>

样式

<style>
html{
height:100%;
}
body{
margin:0;
background:url("images/bg.jpg") no-repeat center/100% 100%;
}
.section{
width:735px;
height:360px;
margin:165px auto 0;
background-color:rgba(0,0,0,0.1);
}
.section h3{
height:50px;
line-height:50px;
text-align:center;
color:#fff;
}
.s-result{
height:300px;
color:#fff;
}
.number{
width:100px;
height:50px;
float:left;
text-align:center;
margin-left:20px;
margin-top:30px;
font-weight:bold;
font-size:32px;
}
.btn{
position:relative;
left:50%;
margin-left:-160px;
bottom:50px;
width:323px;
height:81px;
background:url("images/btn.png");
}
</style>

 

动态效果

<script>
var oBtn=document.getElementsByClassName('btn')[0];//获取按钮元素
var oResult=document.getElementsByClassName('s-result')[0];//获取子布局控件，将所有中奖名单放在这个布局当中。
//定义抽奖名单
var arrName=['小星星','大太阳','黄月亮','艾青','达尼','新奇','小可爱','慕容纳兰','小岳岳','情商负','喜洋洋','飞太郎','红太狼','大可爱','陌暮','宋仲基'];
var step=1;//初始值建立一个名单。
var ave=15;
oBtn.onclick=function(){//点击按钮发生的事件
step=1;
createName();
}
function getName(){
//向下取整数。
var num=Math.floor(Math.random()*arrName.length);
var n=arrName[num];
arrName.splice(num,1);//删除以前抽掉的数
return n;
}
function createName(){
if(step>ave){//若是中奖名单大于15个，则返回一个空。
return null;
}
step++;
var i=document.createElement('div');//建立名字
i.className='number';//将名字放在number中，
i.innerHTML='$$$$';//初始化名字。
oResult.appendChild(i);//将显示的名字放在s-result里面
//固定的转动时间点，一旦超过期间，则肯定中奖名单。
//名单是随机抽取的。
var dis=1;//转动的初始值
var maxDis=30;//最大的转动次数。
var mySet=setInterval(function (){
dis++;
//判断何时中止转动
if(dis>maxDis){
i.innerHTML=getName();
clearInterval(mySet);
createName();//迭代更新
return null;
}
i.innerHTML=arrName[Math.floor(Math.random()*arrName.length)];
},50);
//i.innerHTML=getName();
//名单从哪里来？（数据来源）
}
</script>

 

最终效果