抽奖
#box {
position: relative;
width: 300px;
height: 300px;
margin: 50px auto;
}
#box div {
position: absolute;
width: 100px;
height: 100px;
border: 1px solid black;
text-align: center;
line-height: 100px;
font-size: 20px;
background-color: aquamarine;
box-sizing: border-box;
}
.p1 {
top: 0;
left: 0;
}
.p2 {
top: 0;
left: 100px;
}
.p3 {
top: 0;
left: 200px;
}
.p4 {
top: 100px;
left: 200px;
}
.p5 {
top: 200px;
left: 200px;
}
.p6 {
top: 200px;
left: 100px;
}
.p7 {
top: 200px;
left: 0px;
}
.p8 {
top: 100px;
left: 0px;
}
#box #btn {
top: 100px;
left: 100px;
background-color: red;
color: yellow;
}
#result{
height: 100px;
background-color: red;
color: yellow;
font-size: 40px;
text-align: center;
line-height: 100px;
display: none;
}
<div id="box">
<div class="p1">iphoneX</div>
<div class="p2">华为p30</div>
<div class="p3">小米9</div>
<div class="p4">vivo x27</div>
<div class="p5">三星s10</div>
<div class="p6">oppo FX</div>
<div class="p7">黑鲨</div>
<div class="p8">谢谢参与！</div>
<div id="btn">开始抽奖</div>
</div>
<div id="result"></div>
<script>
var box = document.getElementById('box');
var divs = box.getElementsByTagName('div');
var btn = document.getElementById('btn');
var result = document.getElementById('result');
//var btn = divs[divs.length-1];
var timer = null;
btn.onclick = function () {
var i = 0;
var count = 0; //记录转圈数
//点击开始，第一个div立刻切换样式
divs[i].style.border = "2px solid yellow";
timer = setInterval(function(){
i++;
//当切换到最后一个时继续从第一个开始
if(i == 8){
i = 0;
count++;
}
if(i == 0){
//如果当前变色的是第一个，要让最后一个恢复样式
divs[7].style.border = "1px solid black";
}else{
//当前变颜色的上一个div恢复黑色边框
divs[i-1].style.border = "1px solid black";
}
// 每隔100毫秒让下一个div显示黄色边框
divs[i].style.border = "2px solid yellow";
//当转够两圈并且 i 等于 中奖号就停止
if(count == 2&&i == n){
clearInterval(timer);
console.log(n);
result.innerHTML = "恭喜获得"+divs[n].innerHTML;
result.style.display = 'block';
}
}, 100);
// 随机出奖项的索引 0-7
var n = Math.round(Math.random()*99); // 0-99
if(n>=0&&n<=49){ //50%
n = 7;
}else if(n>=50&&n<=69){// 10%
n = 2;
}else if(n>=70&&n<=74){ // 5%
n = 1;
}else if(n>=75&&n<=79){ // 5%
n = 0;
}else if(n>=80&&n<=89){ //10%
n = 3;
}else if(n>=90&&n<=94){
n = 4;
}else if(n>=95&&n<=97){
n = 5;
}else{
n = 6;
}
}
</script>
效果图
