帮我用javascript写一个抽奖大转盘
时间: 2023-03-05 07:51:25 浏览: 153
好的,以下是一个简单的JavaScript代码实现抽奖大转盘:
```html
<!DOCTYPE html>
<html>
<head>
<title>抽奖大转盘</title>
<style>
#wheel {
position: relative;
width: 400px;
height: 400px;
margin: 50px auto;
}
#inner-wheel {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
height: 300px;
background-color: #ffffff;
border-radius: 50%;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
display: flex;
flex-wrap: wrap;
}
#spin-button {
display: block;
margin: 20px auto;
padding: 10px 20px;
background-color: #ff0000;
color: #ffffff;
border: none;
border-radius: 5px;
font-size: 18px;
cursor: pointer;
}
.segment {
position: relative;
width: 50%;
height: 50%;
border: 2px solid #000000;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
font-size: 20px;
font-weight: bold;
text-transform: uppercase;
}
.segment:nth-child(1) {
background-color: #ffad00;
transform: skewY(-15deg);
}
.segment:nth-child(2) {
background-color: #ff0000;
transform: skewY(15deg);
}
.segment:nth-child(3) {
background-color: #00ff00;
transform: skewX(-15deg);
}
.segment:nth-child(4) {
background-color: #0000ff;
transform: skewX(15deg);
}
</style>
</head>
<body>
<div id="wheel">
<div id="inner-wheel">
<div class="segment">Prize 1</div>
<div class="segment">Prize 2</div>
<div class="segment">Prize 3</div>
<div class="segment">Prize 4</div>
</div>
</div>
<button id="spin-button">Spin the wheel</button>
<script>
const wheel = document.getElementById('inner-wheel');
const spinButton = document.getElementById('spin-button');
const segments = document.querySelectorAll('.segment');
const segmentCount = segments.length;
let currentSegment = 1;
spinButton.addEventListener('click', () => {
// Generate a random number between 1 and the number of segments
const spinResult = Math.floor(Math.random() * segmentCount) + 1;
// Calculate the rotation angle for the wheel based on the random number
const rotationAngle = 360 / segmentCount * (spinResult - 1) + 360 * 10;
// Animate the wheel rotation
wheel.style.transition = 'transform 5s ease-in-out';
wheel.style.transform = `rotate(${rotationAngle}deg)`;
// When the animation is finished, display the result
setTimeout(() => {
alert(`Congratulations! You won ${segments[spinResult - 1].
相关推荐
![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)