我们在上网做问卷调查或投票结束后，时常都会遇到抽奖，不过基本都是假的哈。下面将由简单的js代码来实现一下。
首先思路：1.写出需要的HTML和CSS样式 2.js实现滚动，停止，弹出奖品框。文中所示的代码已上传至GitHub啦。GitHub - tanzhuokun/GetAward.github.io: 抽奖JS简单实现
可以点击这个链接进行抽奖操作：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代码:
<!--抽奖内容-->
<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>
<!--抽奖内容 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时，获取随机中奖数字和遍历的索引，两者容易出现bug，特别取余之后。另外还有就是循环次数，也就是通过循环的li标签来控制，这三者间要么背景色对不上内容，要么直接无线循环了。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为中奖内容设置
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){
//把所有li背景设置为白色
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";
}
//获取随机获奖数字
function getRandom(min,max){
return Math.floor(Math.random()*(max-min+1) + min)
}
基本抽奖功能实现了，但可能代码不是很标准，欢迎评论讨论讨论，共同进步！！！
网友评论