轮盘抽奖最终样式
废话不多说先写静态样式:
html
<section></section>
<button id="Cz">充值两千万</button>
别问为什么,html样式就是这么少其他的都用jquery写
接下来写css
<style>
section {
width: 600px;
height: 600px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 10px;
background: rgb(165, 245, 7);
border: 10px solid #757575;
}
section div {
width: 170px;
line-height: 170px;
text-align: center;
background-color: rgb(238, 119, 139);
color: #f0f0f0;
font-weight: 800;
font-size: 18px;
border: 10px solid rgba(131, 231, 17, 0.548);
}
.red {
background-color: red;
}
#Cz {
background: red;
width: 640px;
border: 10px solid #757575;
font-size: 18px;
color: #fff;
font-weight: 800;
}
</style>
接下来重点来了
<script src="jquery-3.4.1.js"></script>
<script>
// 将抽奖的奖品放在数组里
var items = ['兰博基尼', '法拉利', '星空魅影', '面包车', '开始抽奖', '高级自行车', '王者路由器', '滑板车', '小推车'];
function layout() {
// 记录拼接的 html
var html = '';
for (var i = 0; i < items.length; i++) {
var div = `<div>${items[i]}</div>`;
html += div;
}
$("section").html(html);
}
layout()
// 定抽奖次数为全局 记录抽奖次数
var clickCount = 0;
$("#Cz").click(function () {
clickCount -= 4;
alert('恭喜您充值两千万成功')
})
var flge = true
$("div:eq(4)").click(function () {
if (flge === true) {
clickCount++
// 判断语句限制抽奖次数
if (clickCount > 3) {
alert('您的抽奖次数已用完,请再去充值两千万')
return;
}
//抽奖
lottery()
flge = false;
}
})
var sum = 0;
// 抽奖逻辑
function lottery() {
var arr = [0, 1, 2, 5, 8, 7, 6, 3];
var arrIndex = Math.floor(Math.random() * arr.length);
var index = arr[arrIndex];
var timer = setInterval(() => {
var arr2 = sum
var arr1 = arr[arr2]
if (arr2 >= 8) {
arr1 = arr[arr2 - 8]
}
console.log(sum + "------" + arr1 + "=====" + (index + 8))
$('section div').css('background', 'rgb(238, 119, 139)')
$(`div:eq(${arr1})`).css('background', 'red')
if (sum === arrIndex+8) {
clearInterval(timer);
setTimeout(() => {
alert(items[index]);
sum = sum-8;
flge = true;
return;
}, 500)
}
sum++
}, 100);
}
</script>