我們在上網(wǎng)做問卷調查或投票結束后，時常都會遇到抽獎，不過基本都是假的哈。下面將由簡單的js代碼來實現(xiàn)一下。
首先思路：1.寫出需要的HTML和CSS樣式 2.js實現(xiàn)滾動，停止，彈出獎品框。文中所示的代碼已上傳至GitHub啦。GitHub - tanzhuokun/GetAward.github.io: 抽獎JS簡單實現(xiàn)
可以點擊這個鏈接進行抽獎操作：https://tanzhuokun.github.io/GetAward.github.io/index
樣式結果：
image.png
點擊“開始抽獎”就進行背景色滾動，當然也可以寫成另一種樣式，抽獎按鈕在中間，8個獎品即可，用CSS改變下樣式就OK啦。
CSS樣式展示如下：
#wrap {
text-align: center;
width: 500px;
margin: 100px auto;
position: relative;
}
#img{
width: 100px;
height: 100px;
margin-left: 40px;
margin-top: 20px;
}
#ul1 {
width: 303px;
height: 303px;
margin: 50px auto;
padding: 0;
border-top: 1px solid black;
border-left: 1px solid black;
}
#ul1 li {
float: left;
border-right: 1px solid black;
border-bottom: 1px solid black;
list-style: none;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
}
#tooltips {
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
position: absolute;
top: 0;
z-index: 999;
display: none;
}
#info {
width: 400px;
height: 200px;
background-color: white;
margin: 150px auto;
position: relative;
}
#info .title {
width: 100%;
height: 40px;
background-color: #009f95;
line-height: 40px;
color: white;
padding-left: 20px;
box-sizing: border-box;
}
#info .btn button {
background-color: #009f95;
color: white;
outline: none;
font-size: 10px;
width: 60px;
height: 30px;
margin-left: 300px;
}
#info .content {
position: absolute;
top: 95px;
left: 190px;
box-sizing: border-box;
}
HTML代碼:
<!--抽獎內(nèi)容-->
<div id="wrap">
<button id="btn">開始抽獎</button>
<ul id="ul1">
<li>電腦</li>
<li>100萬</li>
<li>很遺憾~</li>
<li>很遺憾~</li>
<li>鍵盤</li>
<li>iphoneX</li>
<li>100元購物卷</li>
<li>王者2日游</li>
<li>很遺憾~</li>
</ul>
</div>
<!--抽獎內(nèi)容 end-->
<!-- 提示信息 -->
<div id="tooltips">
<div id="info">
<div class="title">信息</div>
<div class="content" id="content"></div>
<img id="img" src="img/love.png"/>
<div class="btn">
<button id="confirm">確定</button>
</div>
</div>
</div>
<!-- 提示信息 end-->
抽獎彈出框效果：
image
談談寫的時候遇到的坑吧。寫js時，獲取隨機中獎數(shù)字和遍歷的索引，兩者容易出現(xiàn)bug，特別取余之后。另外還有就是循環(huán)次數(shù)，也就是通過循環(huán)的li標簽來控制，這三者間要么背景色對不上內(nèi)容，要么直接無線循環(huán)了。js展示如下：
var oBtn = document.getElementById('btn');
var aLi = document.getElementsByTagName('li');
var oTooltips = document.getElementById('tooltips');
var oConfirm = document.getElementById('confirm');
var oContent = document.getElementById('content');
var oImg = document.getElementById('img');
var nowIndex = 0;//定義滾動指定的li
oBtn.onclick = function(){
var number = getRandom(10,28);//獲取中獎隨機號碼
//抽獎背景切換
var scrollLi = setInterval(function(){
console.log(number)
colorChange(aLi,nowIndex);
nowIndex++;
//中獎or為中獎內(nèi)容設置
if(nowIndex==number)
{
clearInterval(scrollLi);
oTooltips.style.display = "block";
if(aLi[nowIndex%9].innerHTML=="很遺憾~"){
oContent.innerHTML ='sorry~ 大明 ' + aLi[nowIndex%9].innerHTML;
oImg.src="img/fool.png"
nowIndex = 0;
}else{
oContent.innerHTML ='恭喜~ 大明 獲得了' + aLi[nowIndex%9].innerHTML;
oImg.src="img/love.png"
nowIndex = 0;
}
}
},100)
}
//改變顏色
function colorChange(aLi,nowIndex){
//把所有l(wèi)i背景設置為白色
for (var i= 0;i<aLi.length;i++) {
aLi[i].style.backgroundColor = "white"
}
//背景
aLi[(nowIndex+1)%9].style.backgroundColor = "red";
}
//點擊確認后消失
oConfirm.onclick = function(){
oTooltips.style.display = "none";
}
//獲取隨機獲獎數(shù)字
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1) + min)
}
基本抽獎功能實現(xiàn)了，但可能代碼不是很標準，歡迎評論討論討論，共同進步?。。?/p>
