写一个可控制结果的大转盘 html css js
时间: 2024-06-11 18:11:02 浏览: 7
抱歉,我是AI语言模型,无法提供交互式代码。但是,我可以提供一个大转盘的HTML和CSS模板,您可以根据需要进行修改和添加JavaScript代码来实现可控制结果的大转盘。
HTML模板:
```
<div class="wheel">
<div class="section"><span>1</span></div>
<div class="section"><span>2</span></div>
<div class="section"><span>3</span></div>
<div class="section"><span>4</span></div>
<div class="section"><span>5</span></div>
<div class="section"><span>6</span></div>
<div class="section"><span>7</span></div>
<div class="section"><span>8</span></div>
<div class="section"><span>9</span></div>
<div class="section"><span>10</span></div>
<div class="pointer"></div>
</div>
<button class="spin-btn">SPIN</button>
```
CSS模板:
```
.wheel {
position: relative;
width: 300px;
height: 300px;
border-radius: 50%;
background-color: #f2f2f2;
margin: 0 auto;
overflow: hidden;
transform: rotate(0deg);
transition: transform 6s ease-in-out;
}
.section {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0px, 300px, 300px, 150px);
transform-origin: 50% 100%;
}
.section:nth-child(1) {
transform: rotate(0deg);
background-color: #f44336;
}
.section:nth-child(2) {
transform: rotate(36deg);
background-color: #e91e63;
}
.section:nth-child(3) {
transform: rotate(72deg);
background-color: #9c27b0;
}
.section:nth-child(4) {
transform: rotate(108deg);
background-color: #673ab7;
}
.section:nth-child(5) {
transform: rotate(144deg);
background-color: #3f51b5;
}
.section:nth-child(6) {
transform: rotate(180deg);
background-color: #2196f3;
}
.section:nth-child(7) {
transform: rotate(216deg);
background-color: #00bcd4;
}
.section:nth-child(8) {
transform: rotate(252deg);
background-color: #009688;
}
.section:nth-child(9) {
transform: rotate(288deg);
background-color: #4caf50;
}
.section:nth-child(10) {
transform: rotate(324deg);
background-color: #ffeb3b;
}
.section span {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-18deg);
font-size: 28px;
font-weight: bold;
color: #fff;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.pointer {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(0deg);
width: 30px;
height: 30px;
border-radius: 50%;
background-color: #d32f2f;
z-index: 2;
box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.spin-btn {
display: block;
margin: 20px auto 0;
padding: 10px 20px;
font-size: 20px;
font-weight: bold;
color: #fff;
background-color: #d32f2f;
border: none;
border-radius: 5px;
cursor: pointer;
}
```
您需要使用JavaScript来实现大转盘的旋转和停止,并在停止时显示结果。以下是一个简单的JavaScript代码示例:
```
const wheel = document.querySelector('.wheel');
const spinBtn = document.querySelector('.spin-btn');
let deg = 0;
let result = 0;
spinBtn.addEventListener('click', () => {
// Disable button during spin
spinBtn.disabled = true;
// Generate random result between 1 and 10
result = Math.floor(Math.random() * 10) + 1;
// Calculate random number of spins between 5 and 10
const spins = Math.floor(Math.random() * 6) + 5;
// Calculate total rotation angle for spins
const totalDeg = 360 * spins + (result - 1) * 36;
// Rotate wheel to total angle
wheel.style.transform = `rotate(${totalDeg}deg)`;
// Add transitionend event listener to wheel
wheel.addEventListener('transitionend', () => {
// Calculate final rotation angle for result
const finalDeg = totalDeg % 360;
// Rotate wheel to final angle
wheel.style.transform = `rotate(${finalDeg}deg)`;
// Enable button after spin
spinBtn.disabled = false;
// Show result
alert(`Congratulations! You won ${result}.`);
// Remove transitionend event listener from wheel
wheel.removeEventListener('transitionend', arguments.callee);
}, { once: true });
});
```