<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>幸运大转盘</title>
<style>
* {
/* 重置默认样式 */
margin: 0;
padding: 0;
border: none;
outline: none;
user-select: none;
}
.wrapper {
position: relative;
height: 200px;
width: 200px;
padding: 20px;
margin: 20px;
background-color: #ff5555;
box-shadow: #000000 0px 0px 10px;
border-radius: 50%;
}
.light {
position: absolute;
height: 10px;
width: 10px;
border-radius: 50%;
top: 5px;
left: 115px;
transform-origin: 5px 115px;
}
.light-twinkling {
animation: 1s twinkling 3, 100ms 3s twinkling 3;
}
.light:nth-child(2n) {
background-color: #fafce7;
}
.light:nth-child(2n+1) {
background-color: #ffe58b;
}
.light:nth-child(2) {
transform: rotate(36deg);
}
.light:nth-child(3) {
transform: rotate(72deg);
}
.light:nth-child(4) {
transform: rotate(108deg);
}
.light:nth-child(5) {
transform: rotate(144deg);
}
.light:nth-child(6) {
transform: rotate(180deg);
}
.light:nth-child(7) {
transform: rotate(216deg);
}
.light:nth-child(8) {
transform: rotate(252deg);
}
.light:nth-child(9) {
transform: rotate(288deg);
}
.light:nth-child(10) {
transform: rotate(324deg);
}
.panel {
position: relative;
height: 200px;
width: 200px;
background-color: #b7b7b7;
border-radius: 100px;
}
.sector {
position: absolute;
left: 100px;
top: 0px;
width: 100px;
height: 200px;
font-size: 14px;
border-radius: 0px 100px 100px 0;
overflow: hidden;
transform-origin: left center;
}
.sector:nth-child(1) {
transform: rotate(-18deg);
}
.sector:nth-child(2) {
transform: rotate(18deg);
}
.sector:nth-child(3) {
transform: rotate(54deg);
}
.sector:nth-child(4) {
transform: rotate(90deg);
}
.sector:nth-child(5) {
transform: rotate(126deg);
}
.sector:nth-child(6) {
transform: rotate(162deg);
}
.sector:nth-child(7) {
transform: rotate(198deg);
}
.sector:nth-child(8) {
transform: rotate(234deg);
}
.sector:nth-child(9) {
transform: rotate(270deg);
}
.sector:nth-child(10) {
transform: rotate(306deg);
}
.sector:nth-child(2n+1) .sector-inner {
background: #fef6e0;
}
.sector:nth-child(2n) .sector-inner {
background: #ffffff;
}
.sector-inner {
text-align: center;
display: block;
width: 40px;
padding: 5px 3px 0 57px;
height: 195px;
transform: translateX(-100px) rotate(36deg);
transform-origin: right center;
border-radius: 100px 0 0 100px;
}
.sector-inner span {
display: block;
transform-origin: center;
transform: rotate(-19deg);
color: #d46854;
}
.pointer {
position: absolute;
left: 79px;
top: 79px;
z-index: 10;
height: 30px;
width: 30px;
padding: 6px;
color: #fff899;
line-height: 15px;
font-size: 12px;
text-align: center;
background-color: #ff5350;
border-radius: 50%;
border: 1px solid #ff5350;
transition: transform 3s cubic-bezier(.2, .93, .43, 1);
}
.pointer::after {
content: '';
position: absolute;
left: 14px;
top: -24px;
border-width: 12px 6px;
border-style: solid;
border-color: transparent;
border-bottom-color: #ff5350;
transform-origin: center;
}
.result {
margin: 20px 60px;
}
@keyframes twinkling {
50% {
background: transparent;
}
}
</style>
</head>
<body>
<div class="wrapper">
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="light"></div>
<div class="panel">
<div class="sector">
<div class="sector-inner">
<span>谢谢参与</span>
</div>
</div>
<div class="sector">
<div class="sector-inner">
<span>10积分</span>
</div>
</div>
<div class="sector">
<div class="sector-inner">
<span>20积分</span>
</div>
</div>
<div class="sector">
<div class="sector-inner">
<span>30积分</span>
</div>
</div>
<div class="sector">
<div class="sector-inner">
<span>40积分</span>
</div>
</div>
<div class="sector">
<div class="sector-inner">
<span>50积分</span>
</div>
</div>
<div class="sector">
<div class="sector-inner">
<span>60积分</span>
</div>
</div>
<div class="sector">
<div class="sector-inner">
<span>70积分</span>
</div>
</div>
<div class="sector">
<div class="sector-inner">
<span>80积分</span>
</div>
</div>
<div class="sector">
<div class="sector-inner">
<span>90积分</span>
</div>
</div>
<div class="pointer">开始抽奖</div>
</div>
</div>
<div class="result"></div>
<script>
let getEle = document.getElementsByClassName.bind(document);
let pointer = getEle('pointer')[0];
let result = getEle('result')[0];
let lights = Array.prototype.slice.call(getEle('light'));
let obj = {}
let cat = 360/10
let prevDom = 0
let onRotation = false; // 记录当前是否正在旋转，如果正在旋转，就不能继续点击了
let reward = ['谢谢参与', '10积分', '20积分', '30积分', '40积分', '50积分', '60积分', '70积分', '80积分', '90积分']; // 根据随机角度获取奖励
var randomArr = [0]
var p = [0,0,0,0,0,100,0,0,0,0] //从指针右边起的格子为第一个格子 一项为第一个格子的概率 最后一项为指针指的格子的概率
for (let index = 1; index < 11; index++) {
if (index === 10) {
randomArr[index] = 100
break;
}
randomArr[index] = randomArr[index - 1] + p[index - 1]
}
console.log(randomArr, 'randomArr');
let getReward = (function () {
currentDeg = 0;
let num = 10
return function () { // 转三圈到四圈
const rdm =parseInt(Math.random() * (100 - 1) + 1);//随机的数
console.log(rdm, 'rdm');
for (var i = 0; i < randomArr.length; i++) {
if (i === 0) {
if (rdm >= 0 && rdm <= randomArr[0]) {
num = i + 1
break
}
} else {
if (rdm > randomArr[i - 1] && rdm <= randomArr[i]) {
num = i + 1
break
}
}
}
console.log(num, 'num');
let rotateDeg = Math.floor((num* cat)-24);
var beginRotate = 2*360+(360-prevDom) //定义默认的旋转圈数，同时补全使轮盘置零，
prevDom = rotateDeg
console.log(currentDeg, rotateDeg, beginRotate);
currentDeg += rotateDeg+beginRotate;
let rewardText = reward[Math.floor((currentDeg + 18) % 360 / 36)]
if (!obj[rewardText]) {
obj[rewardText] = 1;
} else {
obj[rewardText]++;
}
return {
deg: currentDeg,
text: rewardText === '谢谢参与' ? '很遗憾，您没有获得奖品。' : '恭喜获得: ' + rewardText
}
}
})();
// for (let index = 0; index < 100; index++) {
// setTimeout(() => {
// start()
// if (index === 99) {
// console.log(obj);
// }
// }, 300)
// }
pointer.addEventListener('click', () => {
start()
})
function start() {
// if (onRotation) return;
console.log('开始抽奖');
onRotation = true;
lights.forEach(light => { light.className += ' light-twinkling'; });
let nextStatus = getReward();
console.log(nextStatus)
result.innerText = nextStatus.text;
result.style.display = 'none';
pointer.style.transform = `rotate(${nextStatus.deg}deg)`;
}
pointer.addEventListener('transitionend', () => {
console.log('抽奖结束');
setTimeout(() => { // 等闪烁三下结束
// onRotation = false;
lights.forEach(light => { light.className = 'light'; });
result.style.display = 'block';
}, 300);
})
</script>
</body>
</html>
h5大转盘
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
推荐阅读更多精彩内容
- 最近项目上写了一个签到页面,放在h5、ios和安卓中一起用 ，其中有一个功能是抽奖大转盘，这是一个很常用的功能，现...
- 本次大转盘可以适配任意商品个数，根据后台读取的商品个数进行适配，顺便吐槽一下，公司让我一周整好10个活动。。。。。...
