<div id="box">
<h2>双色球抽奖</h2>
<ul>
</ul>
<button id="btn">点击开始随机抽取</button>
</div>
js代码
let box = document.getElementById('box')
let ul = document.getElementsByTagName('ul')[0]
let btn = document.getElementById('btn')
let uli;
var timer;
let p1 = new Promise(function (resolve) {
setTimeout(function () {
resolve();//p1成功的回调
}, 2000)
})
btn.onclick = function () {
ul.innerHTML = ''
clearTimeout(timer);
p1
.then(function () {
uli = document.createElement('li')
uli.innerHTML = rand(1, 34)
ul.appendChild(uli)
return new Promise(function (resolve) {
timer = setTimeout(function () {
resolve()//p2成功的回调
}, 2000)
})
})
.then(function () {
uli = document.createElement('li')
uli.innerHTML = rand(1, 34)
ul.appendChild(uli)
return new Promise(function (resolve) {
timer = setTimeout(function () {
resolve()//p2成功的回调
}, 2000)
})
})
.then(function () {
uli = document.createElement('li')
uli.innerHTML = rand(1, 34)
ul.appendChild(uli)
return new Promise(function (resolve) {
timer = setTimeout(function () {
resolve()//p2成功的回调
}, 2000)
})
})
.then(function () {
uli = document.createElement('li')
uli.innerHTML = rand(1, 34)
ul.appendChild(uli)
return new Promise(function (resolve) {
timer = setTimeout(function () {
resolve()//p2成功的回调
}, 2000)
})
})
.then(function () {
uli = document.createElement('li')
uli.innerHTML = rand(1, 34)
ul.appendChild(uli)
return new Promise(function (resolve) {
timer = setTimeout(function () {
resolve()//p2成功的回调
}, 2000)
})
})
.then(function () {
uli = document.createElement('li')
uli.innerHTML = rand(1, 34)
ul.appendChild(uli)
return new Promise(function (resolve) {
timer = setTimeout(function () {
resolve()//p2成功的回调
}, 2000)
})
})
.then(function () {
uli = document.createElement('li')
uli.innerHTML = rand(1, 34)
ul.appendChild(uli)
let ulis = document.querySelectorAll('li')
if (ulis.length - 1 == 6) {
ulis[ulis.length - 1].style.background = 'blue'
}
return new Promise(function (resolve) {
timer = setTimeout(function () {
resolve()//p2成功的回调
}, 2000)
})
})
}
// 随机数封装函数
function rand(min, max) {
return min + Math.floor(Math.random() * (max - min + 1));
}
css代码
* {
margin: 0;
padding: 0;
}
#box {
width: 500px;
height: 200px;
border: 1px solid red;
margin: 100px auto;
text-align: center;
position: relative;
}
#box h2 {
color: #ccc;
position: absolute;
top: -50px;
left: 180px;
}
ul {
list-style: none;
display: flex;
justify-content: space-evenly;
margin-top: 75px;
}
li {
width: 50px;
height: 50px;
text-align: center;
background: red;
border-radius: 50%;
line-height: 50px;
}
#btn {
width: 300px;
height: 50px;
position: absolute;
left: 100px;
bottom: -80px;
cursor: pointer;
}