使用纯CSS和JavaScript来实现一个转盘抽奖效果
使用纯CSS和JavaScript来实现一个转盘抽奖效果,抽到机率相同
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>转盘抽奖</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f7f7f7;
}
.container {
position: relative;
width: 300px;
height: 300px;
}
/* 轮盘容器 */
.wheel {
width: 100%;
height: 100%;
border-radius: 50%;
border: 5px solid #333;
position: relative;
overflow: hidden;
transform: rotate(-36deg);
transition: transform 5s ease-out;
}
/* 使用 clip-path 切分成10个扇形,并设置z-index */
.wheel div {
position: absolute;
width: 100%;
height: 100%;
clip-path: polygon(50% 50%, 87% -3%, 100% 33%);
transform-origin: 50% 50%;
z-index: 1;
}
/* 设置每个扇形区域的颜色和旋转角度 */
.wheel div:nth-child(1) {
background-color: #f39c12;
transform: rotate(0deg);
}
.wheel div:nth-child(2) {
background-color: #e74c3c;
transform: rotate(36deg);
}
.wheel div:nth-child(3) {
background-color: #8e44ad;
transform: rotate(72deg);
}
.wheel div:nth-child(4) {
background-color: #3498db;
transform: rotate(108deg);
}
.wheel div:nth-child(5) {
background-color: #1abc9c;
transform: rotate(144deg);
}
.wheel div:nth-child(6) {
background-color: #27ae60;
transform: rotate(180deg);
}
.wheel div:nth-child(7) {
background-color: #f1c40f;
transform: rotate(216deg);
}
.wheel div:nth-child(8) {
background-color: #2ecc71;
transform: rotate(252deg);
}
.wheel div:nth-child(9) {
background-color: #e67e22;
transform: rotate(288deg);
}
.wheel div:nth-child(10) {
background-color: #c0392b;
transform: rotate(324deg);
}
/* 奖项名称的显示 */
.wheel div span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(150%, -380%) rotate(-45deg);
font-size: 12px;
color: #fff;
text-align: center;
}
/* 指针样式 */
.pointer {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 130px solid #333;
transform: translate(4%, -96%);
transform-origin: bottom center; /* 将旋转中心点移到指针底部 */
z-index: 10;
}
button {
width: 100px;
height: 32px;
border-radius: 20px;
margin-top: 40px;
}
</style>
</head>
<body>
<div style="display: flex; flex-direction: column; align-items: center">
<div class="container">
<div class="wheel" id="wheel">
<div><span>一等奖</span></div>
<div><span>二等奖</span></div>
<div><span>三等奖</span></div>
<div><span>四等奖</span></div>
<div><span>五等奖</span></div>
<div><span>六等奖</span></div>
<div><span>七等奖</span></div>
<div><span>八等奖</span></div>
<div><span>九等奖</span></div>
<div><span>十等奖</span></div>
</div>
<div class="pointer"></div>
</div>
<button onclick="spinPointer()">开始抽奖</button>
</div>
<script>
let spinning = false
function spinPointer() {
if (spinning) return
spinning = true
const pointer = document.querySelector('.pointer')
const randomDegree = Math.floor(Math.random() * 360) // 随机角度
const finalDegree = 360 * 3 + randomDegree // 确保指针至少旋转3圈
// 旋转指针
pointer.style.transition = 'transform 2s ease-out'
pointer.style.transform = `translate(4%, -96%) rotate(${finalDegree}deg)`
setTimeout(() => {
spinning = false
const resultDegree = randomDegree % 360 // 获取最终位置
console.log(resultDegree, randomDegree, 'randomDegree')
alert(`抽到的奖项是:${getResult(resultDegree)}`)
}, 2000) // 2秒后显示结果
}
function getResult(degree) {
const segmentDegrees = 360 / 10 // 每个扇形的度数
const index =
Math.floor((degree + segmentDegrees / 2) / segmentDegrees) % 10 // 计算对应的奖项索引
const awards = [
'一等奖',
'二等奖',
'三等奖',
'四等奖',
'五等奖',
'六等奖',
'七等奖',
'八等奖',
'九等奖',
'十等奖'
]
return awards[index]
}
</script>
</body>
</html>
原文地址:https://blog.csdn.net/weixin_46328739/article/details/142819449
免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!