用JS实现简单的网页抽奖

我们在上网做问卷调查或投票结束后，时常都会遇到抽奖，不过基本都是假的哈。下面将由简单的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~ 大明&nbsp;' + 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)

}

基本抽奖功能实现了，但可能代码不是很标准，欢迎评论讨论讨论，共同进步！！！

最后编辑于：2019.03.20 21:22:50