实现商城抽奖活动
Posted 阳哥
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了实现商城抽奖活动相关的知识，希望对你有一定的参考价值。
随着互联网产业的兴起,互联网产品也愈来愈多。对应的活动策划以及运营也应运而生。其中在商城活动里最常见的一个功能就是抽奖。作为一个合格的前端工程师，就必须要了解其实现原理，对于日后开发功能组件做铺垫。
<!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>
以上是关于实现商城抽奖活动的主要内容，如果未能解决你的问题，请参考以下文章