随着互联网产业的衰亡, 互联网产品也愈来愈多。对应的流动策动以及经营也应运而生。其中在商城流动里最常见的一个性能就是抽奖。作为一个合格的前端工程师，就必须要理解其实现原理，对于日后开发性能组件做铺垫。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<style type="text/css">
.wrap {
width: 300px;
height: 300px;
position: relative;
}
.wrap div {
position: absolute;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
text-overflow: ellipsis;
white-space: no-wrap;
background-color: aliceblue;
}
.wrap>div:first-child {
top: 10px;
left: 10px;
}
.wrap>div:nth-child(2) {
top: 10px;
left: 100px;
}
.wrap>div:nth-child(3) {
top: 10px;
left: 190px;
}
.wrap>div:nth-child(4) {
top: 100px;
left: 190px;
}
.wrap>div:nth-child(5) {
top: 190px;
left: 190px;
}
.wrap>div:nth-child(6) {
top: 190px;
left: 100px;
}
.wrap>div:nth-child(7) {
top: 190px;
left: 10px;
}
.wrap>div:nth-child(8) {
top: 100px;
left: 10px;
}
.wrap>div:nth-child(9) {
top: 100px;
left: 100px;
background: yellow;
}
.wrap>div.active {background: red;}
.wrap .drawing {
padding-top: 40rpx;
background: #ccc;
text-shadow: 3px 2px 3px #999;
box-shadow: 1px 2px 0px 0px rgba(153, 153, 153, 1);
}
</style>
<body>
<div class="wrap">
<div>iphone</div>
<div>newspaper</div>
<div>u 盘 </div>
<div> 金币 </div>
<div> 集分宝 </div>
<div> 会员 </div>
<div> 金币 </div>
<div> 红包 </div>
<div> 点我抽奖 </div>
</div>
<script>
let oWrap = document.querySelector('.wrap');
let aDivs = oWrap.children;
let prizeList = ['iphone', 'newspaper', 'u 盘', '金币', '集分宝', '比特币', '基金', '红包'];
let initialSpeed = 60; // 初始转速，定时器初始工夫
let defaultSpeed = 100; // 定时器初始工夫
let turns = 0; // 已转圈数
let maxTurns = 3; // 最大转圈数
let lotteryTimer = null; // 以后所在点的索引值
let curIndex = 0; // 以后所在点的索引值
let winIndex = 6; // 中奖的索引
let drawing = false; // 抽奖中
let lastIndex = null; // 上一次的索引
for (let i = 0; i < aDivs.length - 1; i++) {aDivs[i].innerText = prizeList[i]
}
let clickDom = aDivs[aDivs.length - 1]; // 触发抽奖事件的 DOM
addClickEventHandler(clickDom); // 点击事件增加事件绑定 避免反复点击
aDivs[curIndex].className = 'active';
function init() {oWrap = document.querySelector('.wrap');
aDivs = oWrap.children;
prizeList = ['iphone', 'newspaper', 'u 盘', '金币', '集分宝', '比特币', '基金', '红包'];
initialSpeed = 60; // 初始转速，定时器初始工夫
defaultSpeed = 100; // 定时器初始工夫
turns = 0; // 已转圈数
maxTurns = 3; // 最大转圈数
lotteryTimer = null; // 以后所在点的索引值
curIndex = 0; // 以后所在点的索引值
winIndex = 6; // 中奖的索引
drawing = false; // 抽奖中
lastIndex = null; // 上一次的索引
for (let i = 0; i < aDivs.length - 1; i++) {aDivs[i].innerText = prizeList[i]
}
aDivs[curIndex].className = 'active';
aDivs[winIndex].className = '';
addClickEventHandler(clickDom); // 点击事件增加事件绑定 避免反复点击
clickDom.className = '';
clickDom.innerText = '去抽奖'
}
function drawHandler() {console.log('1111')
draw();}
function draw() {clearTimeout(lotteryTimer);
// 正在抽奖 禁止点击事件 扭转文本
removeClickEventHandler(clickDom) // 移出事件绑定 避免反复点击
clickDom.className = 'drawing';
clickDom.innerText = '正在抽奖中'
removeClickEventHandler(clickDom);
lastIndex = curIndex;
curIndex += 1;
if (curIndex < aDivs.length - 1) {aDivs[curIndex].className = 'active';
}
if (curIndex > 0) {aDivs[lastIndex].className = '';
}
if (curIndex > prizeList.length - 1) {
curIndex = 0;
aDivs[curIndex].className = 'active';
turns = turns + 1;
}
if (turns >= maxTurns && curIndex == winIndex) {
// 已转圈数大于最大限度的圈数时并且以后下标等于中奖下标时
drawing = false;
addClickEventHandler(clickDom);
clearTimeout(lotteryTimer);
aDivs[aDivs.length - 1].className = '';
lotteryTimer = null;
turns = 0;
setTimeout(() => {let msg = aDivs[curIndex].innerText;
openDrawLotPop(msg);
init();}, 50)
} else {
// 不满足前一条件时调用定时器
const _this = this;
lotteryTimer = setTimeout(() => {draw();
}, initialSpeed);
// 最初一圈加速，减少定时器工夫
if (turns >= maxTurns - 2) {initialSpeed += 40;}
}
}
function openDrawLotPop(name) {alert(` 祝贺你取得了 ${name}`)
}
function removeClickEventHandler(clickDom) {if (clickDom.removeEventListener) { // 所有浏览器，除了 IE 8 及更早 IE 版本
clickDom.removeEventListener("click", drawHandler);
} else if (x.detachEvent) { // IE 8 及更早 IE 版本
clickDom.detachEvent("onclick", drawHandler);
}
}
function addClickEventHandler(clickDom) {if (clickDom.addEventListener) { // 所有浏览器，除了 IE 8 及更早 IE 版本
clickDom.addEventListener("click", drawHandler);
} else if (clickDom.attachEvent) { // IE 8 及更早 IE 版本
clickDom.attachEvent("onclick", drawHandler);
}
}
</script>
</body>
</html>