九宫格抽奖
html部分:
<div class="pctw">
<div class="pcWrap">
<div class="pctw-prize">
<div class="prize-center">
<ul class="prize-center-ul">
<li class="pctw-li1 pctw-li prize1 prize-on">
<div class="content-center">
<p>88元优惠券
</p>
</div>
</li>
<li class="pctw-li2 pctw-li prize2">
<div class="content-center">
<p>U盘</p>
</div>
</li>
<li class="pctw-li3 pctw-li prize3">
<div class="content-center">
<p>188元优惠券</p>
</div>
</li>
<li class="pctw-li4 pctw-li prize8">
<div class="content-center">
<p>小米插线板</p>
</div>
</li>
<li class="pctw-special-li">
<p class="ping just">立即抽奖</p>
</li>
<li class="pctw-li5 pctw-li prize4">
<div class="content-center">
<p>100元内课程任选</p>
</div>
</li>
<li class="pctw-li6 pctw-li prize7">
<div class="content-center">
<p>50元内课程任选</p>
</div>
</li>
<li class="pctw-li7 pctw-li prize6">
<div class="content-center">
<p>谢谢参与</p>
</div>
</li>
<li class="pctw-li8 pctw-li prize5">
<div class="content-center">
<p>搅拌杯</p>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<!--活动弹窗-->
<div class="model-center"></div>
<div class="model" style="display: none;">
<h3>通知</h3>
<div class="model-m">
<p class="model-title">恭喜 ！</p>
<p class="mp6"> 获得50元任意一门课</p>
<p class="mp2"> (已发送您的平台账户内)</p>
</div>
</div>
css部分：
.pctw-prize {
width: 100%;
height: 9.09rem;
margin-top: -1px;
}
.prize-center {
padding-top: 0.86rem;
width: 100%;
margin: 0 auto;
}
.prize-center-ul {
width: 7.08rem;
height: 6.04rem;
padding: 0.7rem 0 0 0.35rem;
margin: 0 auto;
margin-top: 0.4rem;
}
.pctw-li {
width: 2.09rem;
height: 1.61rem;
line-height: 1.61rem;
float: left;
margin-left: 0.04rem;
margin-bottom: 0.04rem;
padding: 0.2rem 0;
}
.prize-on {
width: 2.09rem;
height: 1.61rem;
}
.ping1 {
display: none;
}
.pctw-li1,
.pctw-li4,
.pctw-li6 {
margin-left: 0;
}
.pctw-special-li {
float: left;
margin-left: 0.04rem;
position: relative;
width: 2.09rem;
height: 1.61rem;
background-color: #217aff;
}
.pctw-special-li p {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.just {
width: 1.12rem;
height: 0.28rem;
color: #fff;
}
.content-center {
width: 2.09rem;
margin: 0 auto;
text-align: center;
}
.content-center p {
font-size: 0.18rem;
color: #fff;
margin-top: 0.05rem;
}
/*活动弹窗*/
.model {
width: 100%;
height: 3.3rem;
text-align: center;
position: fixed;
display: flex;
flex-direction: column;
align-items: center;
top: 33%;
z-index: 500;
}
.model-center {
position: fixed;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: none;
left: 0;
top: 0;
z-index: 490;
}
.model h3 {
width: 6rem;
height: 0.76rem;
background-color: #2112df;
text-align: center;
line-height: 0.76rem;
border-radius: 0.2rem 0.2rem 0 0;
color: #fff;
}
.model-m {
width: 6rem;
height: 2.54rem;
background-color: #fff;
border-radius: 0 0 0.2rem 0.2rem;
}
.model-title {
margin-top: 0.42rem;
font-size: 0.36rem;
color: #6b5ff6;
font-weight: 600;
}
.mp6 {
font-size: 0.36rem;
color: #666;
font-weight: 600;
margin-top: 0.32rem;
}
.mp2 {
font-size: 0.24rem;
color: #999;
}
js部分：
$(function () {
// 奖品是否还有
$(".prize1").addClass("prize-noPrize");
$(".prize2").addClass("prize-noPrize");
$(".prize3").addClass("prize-noPrize");
$(".prize4").addClass("prize-noPrize");
$(".prize5").addClass("prize-noPrize");
// $(".prize8").addClass("prize-noPrize");
// $(".prize6").addClass("prize-noPrize");
// $(".prize7").addClass("prize-noPrize");
})
// 设置返回的内容
var prizeArr = [{
mp6: "获得88元购课优惠券",
mp2: "(已发放至您的平台账户内)",
},
{
mp6: "获得U盘一个",
mp2: "(5月8日客服将联系您沟通邮寄事宜)",
},
{
mp6: "获得188元购课优惠券",
mp2: "(已发放至您的平台账户内)",
},
{
mp6: "获得100元内课程任选一门",
mp2: "(联系在线客服选课)",
},
{
mp6: "获得搅拌杯一个",
mp2: "(5月8日客服将联系您沟通邮寄事宜)",
},
{
mp6: "谢谢参与",
},
{
mp6: "获得50元内课程任选一门",
mp2: "(联系在线客服选课)",
},
{
mp6: "获得小米插线板一个",
mp2: "(5月8日客服将联系您沟通邮寄事宜)",
},
];
var prizeInfo;
// 点击开始抽奖
$(".just").click(function () {
//进行轮循
var numarr = [4, 2, 34, 18, 18, 4, 18, 2];
var tempnum = Math.floor(Math.random() * 8);
//随机数
var randomNum = numarr[tempnum];
// 概率
if (randomNum <= 8) {
randomNum = randomNum + 17;
}
if (randomNum == 34) {
randomNum = randomNum + 1;
}
if (tempnum == 3) {
randomNum = randomNum + 3;
}
if (tempnum == 4) {
randomNum = randomNum + 5;
}
if (tempnum == 6) {
randomNum = randomNum + 7;
}
var linum = 0;
// 递归函数
function recursion(nub, claName) {
// 如果不是结束运行
if (claName) {
if (nub >= 8) {
nub = 0;
}
setTimeout(function () {
nub++;
$(".pctw-li").removeClass("prize-on");
$(".prize" + nub).addClass("prize-on");
// 递归自己调用自己
recursion(nub, $(".prize" + nub).hasClass("prize-noPrize"));
}, 200)
} else {
linum = nub;
prize(linum)
return false;
}
}
var timer = setInterval(function () {
if (linum >= 8) {
linum = 0;
}
linum++;
$(".pctw-li").removeClass("prize-on");
$(".prize" + linum).addClass("prize-on");
randomNum--;
if (randomNum <= 0) {
clearInterval(timer);
var className = $(".prize" + linum).hasClass("prize-noPrize");
prizeInfo = {
prizeName: $(".prize-on").data("name"),
};
if (className) {
// 调用递归函数
recursion(linum, className);
} else {
prize(linum)
}
}
}, 200);
});
// 获取奖品的弹窗
function prize(linum) {
if (linum == 1) {
$(".model-center").show();
$(".model").show();
$(".model-title").show();
$(".mp6")
.show()
.text(prizeArr[linum - 1].mp6);
$(".mp2")
.show()
.text(prizeArr[linum - 1].mp2);
setTimeout(function () {
window.location.reload();
}, 4000);
}
if (linum == 2) {
$(".model-center").show();
$(".model").show();
$(".model-title").show();
$(".mp6")
.show()
.text(prizeArr[linum - 1].mp6);
$(".mp2")
.show()
.text(prizeArr[linum - 1].mp2);
setTimeout(function () {
window.location.reload();
}, 4000);
}
if (linum == 3) {
$(".model-center").show();
$(".model").show();
$(".model-title").show();
$(".mp6")
.show()
.text(prizeArr[linum - 1].mp6);
$(".mp2")
.show()
.text(prizeArr[linum - 1].mp2);
setTimeout(function () {
window.location.reload();
}, 4000);
}
if (linum == 4) {
$(".model-center").show();
$(".model").show();
$(".model-title").show();
$(".mp6")
.show()
.text(prizeArr[linum - 1].mp6);
$(".mp2")
.show()
.text(prizeArr[linum - 1].mp2);
setTimeout(function () {
window.location.reload();
}, 4000);
}
if (linum == 5) {
$(".model-center").show();
$(".model").show();
$(".model-title").show();
$(".mp6")
.show()
.text(prizeArr[linum - 1].mp6);
$(".mp2")
.show()
.text(prizeArr[linum - 1].mp2);
setTimeout(function () {
window.location.reload();
}, 4000);
}
if (linum == 6) {
console.log(prizeArr[linum - 1].mp6)
$(".model-center").show();
$(".model").show();
$(".model-title").hide();
$(".wrong")
.show()
.text(prizeArr[linum - 1].mp6);
$(".mp2").hide();
setTimeout(function () {
window.location.reload();
}, 4000);
}
if (linum == 7) {
$(".model-center").show();
$(".model").show();
$(".model-title").show();
$(".mp6")
.show()
.text(prizeArr[linum - 1].mp6);
$(".mp2")
.show()
.text(prizeArr[linum - 1].mp2);
setTimeout(function () {
window.location.reload();
}, 4000);
}
if (linum == 8) {
$(".model-center").show();
$(".model").show();
$(".model-title").show();
$(".mp6")
.show()
.text(prizeArr[linum - 1].mp6);
$(".mp2")
.show()
.text(prizeArr[linum - 1].mp2);
setTimeout(function () {
window.location.reload();
}, 4000);
}
}
浙公网安备 33010602011771号