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>

 

最終效果