<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>spin wheel</title>
</head>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #0a1b1a;
}
.container {
position: relative;
width: 400px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
.container::before {
content: '';
position: absolute;
width: 30px;
height: 50px;
background: yellow;
top: 45px;
z-index: 100000;
clip-path: polygon(50% 0%,65% 50%,50% 100%,35% 50%);
}
.wheel {
position: absolute;
width: 100%;
height: 100%;
border: 3px solid #39ffe2;
box-shadow: 0 0 10 #39ffe2;
border-radius: 50%;
transition: transform 5s ease-in-out;
overflow: hidden;
}
.wheel span {
position: absolute;
left: calc(50% - 1px);
width: 2px;
height: 100%;
background: #39ffe2;
transform: rotate(calc(45deg * var(--i)));
filter: drop-shadow(0 0 5px #39ffe2);
}
.spinBtn {
position: absolute;
inset: 140px;
background: #39ffe2;
color: black;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
z-index: 10000;
cursor: pointer;
}
.number {
position: absolute;
inset: 0;
rotate: 22.5deg;
}
.number b {
position: absolute;
inset: 10px;
transform: rotate(calc(45deg * var(--i)));
text-align: center;
color: #39ffe2;
font-size: 2em;
}
.inner {
position: absolute;
width: 260px;
height: 260px;
background: black;
transition: transform 5s ease-in-out;
}
.result {
position: absolute;
bottom: 20px;
font-size: 3em;
color: white;
font-weight: bold;
text-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
opacity: 0;
transition: opacity 0.5s ease-in-out;
}
</style>
<body>
<div class="container">
<div class="spinBtn">Spin</div>
<div class="wheel">
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<div class="number">
<b style="--i:0">1</b>
<b style="--i:1">2</b>
<b style="--i:2">3</b>
<b style="--i:3">4</b>
<b style="--i:4">5</b>
<b style="--i:5">6</b>
<b style="--i:6">7</b>
<b style="--i:7">8</b>
</div>
</div>
<div class="wheel inner">
<span style="--i:0;"></span>
<span style="--i:1;"></span>
<span style="--i:2;"></span>
<span style="--i:3;"></span>
<span style="--i:4;"></span>
<div class="number">
<b style="--i:0">1</b>
<b style="--i:1">2</b>
<b style="--i:2">3</b>
<b style="--i:3">4</b>
<b style="--i:4">5</b>
<b style="--i:5">6</b>
<b style="--i:6">7</b>
<b style="--i:7">8</b>
</div>
</div>
<div class="result"></div>
<script type="text/javascript">
let spinBtn = document.querySelector(".spinBtn");
let result = document.querySelector(".result");
spinBtn.onclick = function () {
// Initialize result text
let resultText = "";
// Randomize the rotation values for both wheels
let value1 = Math.ceil(Math.random() * -3600);
let value2 = Math.ceil(Math.random() * 3600);
// Select both wheel elements
let wheel = document.querySelector(".wheel");
let inner = document.querySelector(".inner");
// Apply the rotation to the main wheel
wheel.style.transform = "rotate(" + value1 + "deg)";
// Apply the rotation to the inner wheel
inner.style.transform = "rotate(" + value2 + "deg)";
// Show result immediately
result.style.opacity = 1;
// Show result after the spin is complete
setTimeout(function () {
let finalAngle1 = value1 % 360;
if (finalAngle1 < 0) finalAngle1 += 360;
let section1 = Math.floor((finalAngle1 + 22.5) / 45) + 1; // Assuming each section is 45 degrees
let finalAngle2 = value2 % 360;
if (finalAngle2 < 0) finalAngle2 += 360;
let section2 = Math.floor((finalAngle2 + 22.5) / 45) + 1; // Assuming each section is 45 degrees
// Update result text
resultText += "Wheel 1: ";
switch (section1) {
case 1:
resultText += "Result 1";
break;
case 2:
resultText += "Result 2";
break;
case 3:
resultText += "Result 3";
break;
case 4:
resultText += "Result 4";
break;
case 5:
resultText += "Result 5";
break;
case 6:
resultText += "Result 6";
break;
case 7:
resultText += "Result 7";
break;
case 8:
resultText += "Result 8";
break;
}
resultText += " Wheel 2: "; // Added space after "Wheel 2:"
switch (section2) {
case 1:
resultText += "Result 1";
break;
case 2:
resultText += "Result 2";
break;
case 3:
resultText += "Result 3";
break;
case 4:
resultText += "Result 4";
break;
case 5:
resultText += "Result 5";
break;
case 6:
resultText += "Result 6";
break;
case 7:
resultText += "Result 7";
break;
case 8:
resultText += "Result 8";
break;
}
// Display the combined results
result.textContent = resultText;
}, 5000); // Adjust this time to match your wheel spin transition duration
}
</script>
</div>
</body>
</html>
Here many types of latest technology news, many useful (tools, software, apps, website, technical problem solution )If you have any query regrading Site, Advertisement and any other issue, please feel free to contact me