我们在上网做问卷调查或投票结束后,时常都会遇到抽奖,不过基本都是假的哈。下面将由简单的js代码来实现一下。
首先思路:1.写出需要的HTML和CSS样式 2.js实现滚动,停止,弹出奖品框。文中所示的代码已上传至GitHub啦。GitHub - tanzhuokun/GetAward.github.io: 抽奖JS简单实现
样式结果:
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代码:
开始抽奖
- 电脑
- 100万
- 很遗憾~
- 很遗憾~
- 键盘
- iphoneX
- 100元购物卷
- 王者2日游
- 很遗憾~
确定
抽奖弹出框效果:
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[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)
}
基本抽奖功能实现了,但可能代码不是很标准,欢迎评论讨论讨论,共同进步!!!