基于html简单转盘选取,圆形转盘要求不同的分区用不同的颜色区分,分区中可添加文字,有启动按键,点击启动按键后5秒钟停止。
时间: 2024-03-08 22:49:53 浏览: 15
好的,我可以为您提供一个基于 HTML 的转盘选取的示例代码,如下所示:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>转盘选取</title>
<style>
#canvas {
margin: 0 auto;
display: block;
}
#startBtn {
margin-top: 20px;
display: block;
font-size: 20px;
padding: 10px;
background-color: #0099cc;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<button id="startBtn">启动</button>
<script>
const canvas = document.getElementById('canvas');
const startBtn = document.getElementById('startBtn');
const ctx = canvas.getContext('2d');
const colors = ['#ff0000', '#00ff00', '#0000ff', '#ffff00', '#ff00ff', '#00ffff'];
const texts = ['奖品1', '奖品2', '奖品3', '奖品4', '奖品5', '奖品6'];
const angles = [0, 60, 120, 180, 240, 300];
const arc = Math.PI / 3;
let speed = 0;
let index = 0;
let isRunning = false;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath();
for (let i = 0; i < 6; i++) {
ctx.fillStyle = colors[i];
ctx.arc(200, 200, 150, angles[i] * Math.PI / 180, (angles[i] + 60) * Math.PI / 180, false);
ctx.lineTo(200, 200);
ctx.fill();
ctx.save();
ctx.translate(200, 200);
ctx.rotate((angles[i] + 30) * Math.PI / 180);
ctx.fillStyle = '#fff';
ctx.font = '30px Arial';
ctx.fillText(texts[i], 90, 0);
ctx.restore();
}
ctx.closePath();
}
function run() {
isRunning = true;
startBtn.disabled = true;
let timer = setInterval(() => {
speed -= 0.1;
angles[index] += speed;
if (speed <= 0 && index === 5) {
clearInterval(timer);
isRunning = false;
startBtn.disabled = false;
alert(`恭喜您获得${texts[index]}!`);
}
if (speed <= 0) {
index = Math.floor((angles[5] + arc / 2) / arc) % 6;
speed = 0;
}
}, 50);
}
draw();
startBtn.onclick = () => {
if (!isRunning) {
speed = Math.random() * 10 + 10;
run();
}
}
</script>
</body>
</html>
```
在这个示例代码中,我们使用了 Canvas 来实现了一个圆形转盘,并且为不同的分区设置了不同的颜色,并且在分区中添加了文字。同时,我们还添加了一个启动按键,点击启动按键后会启动转盘选取,并且在 5 秒钟后停止,并且弹出获奖提示框。
请注意,这个示例代码仅供参考,您可以根据自己的需求进行修改。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)