有一个转盘,通过js默认生成一个小于360的角度,再加上30turn,通过js将样式设定到元素上 通过过渡实现角度旋转,通过js动态生成3-5s,最终得到抽奖结果 设定6个奖项,分别是三个三等奖,两个二等奖,一个一等奖 点击开始按钮,开始旋转转盘,旋转结束之后提示获取的奖项
时间: 2024-04-24 18:26:12 浏览: 12
您好!根据您的描述,您想实现一个转盘抽奖的功能,其中包含6个奖项(3个三等奖,2个二等奖,1个一等奖)。点击开始按钮后,转盘开始旋转,旋转结束后提示获取的奖项。以下是一个实现此功能的示例代码:
HTML部分:
```html
<div id="turntable"></div>
<button id="startBtn">开始</button>
<div id="result"></div>
```
CSS部分:
```css
#turntable {
width: 200px;
height: 200px;
background-color: #ccc;
position: relative;
transform-origin: 50% 50%;
transition: transform 3s ease-out;
}
.slice {
position: absolute;
width: 100%;
height: 100%;
}
.slice1 { background-color: #ff0000; }
.slice2 { background-color: #00ff00; }
.slice3 { background-color: #0000ff; }
.slice4 { background-color: #ffff00; }
.slice5 { background-color: #ff00ff; }
.slice6 { background-color: #00ffff; }
```
JavaScript部分:
```javascript
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function startRotate() {
var turntable = document.getElementById("turntable");
var resultDiv = document.getElementById("result");
// 随机生成角度(0到360度)
var randomAngle = getRandomInt(0, 360);
// 添加30圈(360度一圈,共30圈)
var totalAngle = randomAngle + 30 * 360;
// 设置过渡效果,使转盘旋转
turntable.style.transform = "rotate(" + totalAngle + "deg)";
// 3秒后显示抽奖结果
setTimeout(function() {
var prize;
// 根据结束角度判断获取的奖项
var endAngle = totalAngle % 360;
if (endAngle >= 0 && endAngle < 60) {
prize = "一等奖";
} else if (endAngle >= 60 && endAngle < 150) {
prize = "二等奖";
} else {
prize = "三等奖";
}
resultDiv.innerHTML = "恭喜您获得:" + prize;
}, 3000);
}
var startBtn = document.getElementById("startBtn");
startBtn.addEventListener("click", startRotate);
```
这是一个基本的实现,当点击开始按钮后,转盘会旋转,并在旋转结束后显示获取的奖项。每次点击开始按钮,都会生成一个新的随机角度用于旋转,确保每次抽奖结果都是随机的。您可以根据自己的需求进行修改和美化。希望对您有帮助!