简单的抽奖案例,效果已实现,但还存在很多的不足之处,新人初写代码,望大家指点
html代码:
<button id="start">开始</button>
<button id="stop1">停止</button>
<div class="warp">
</div>
css代码:
* {
margin: 0;
padding: 0;
}
.warp {
width: 600px;
height: 600px;
margin: 10px auto;
position: relative;
}
.warp div {
width: 198px;
height: 198px;
background-color: pink;
border: 1px solid red;
text-align: center;
position: absolute;
line-height: 200px;
}
.warp .active {
background-color: orange;
color: white;
}
button {
margin-left: 480px;
width: 50px;
height: 30px;
line-height: 30px;
text-align: center;
}
js代码:
var goodsList = ["苹果13", "mac", "小米手环", "阿迪达斯", "梦龙雪糕", "谢谢惠顾", "笔记本", "对象"]
var list = ["谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "谢谢惠顾", "苹果13"]
var warp = document.querySelector(".warp")
warp.innerHTML = ''
for (var i = 0; i < goodsList.length; i++) {
warp.innerHTML += '<div>' + goodsList[i] + '</div>'
}
var items = warp.children
items[1].style.left = "200px"
items[2].style.left = "400px"
items[3].style.left = "400px"
items[3].style.top = "200px"
items[4].style.top = "400px"
items[4].style.left = "400px"
items[5].style.top = "400px"
items[5].style.left = "200px"
items[6].style.top = "400px"
items[7].style.top = "200px"
var flag = true
var t = 200
var x = 0
var randomGood;
function random(a, b) {
return Math.floor(Math.random() * (b - a + 1)) + a
}
function f() {
items[x].className = ""
x++
if (x > 7) {
x = 0
}
items[x].className = "active"
if (flag) {
t -= 20
if (t <= 30) {
t = 30
}
} else {
t += 30
if (t >= 500) {
t = 500
if (items[x].innerHTML === randomGood) {
console.log("恭喜你获取:" + randomGood);
flag = true
return
}
}
}
setTimeout(f, t)
}
start.onclick = function () {
if (flag) {
randomGood = list[random(0, list.length - 1)]
f()
}
this.disabled = true
stop1.disabled = false
}
stop1.onclick = function () {
flag = false
start.disabled = false
this.disabled = true
}