To display an image for the second spin instead of text, you can modify the JavaScript code to change the content of the result div dynamically. Here's how you can do it:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>spin wheel</title>
<style>
/* Your CSS styles here */
</style>
</head>
<body>
<div class="container">
<div class="spinBtn">Spin</div>
<div class="wheel">
<!-- Wheel content -->
</div>
<div class="wheel inner">
<!-- Inner wheel content -->
</div>
<div class="result"></div>
<script type="text/javascript">
let spinBtn = document.querySelector(".spinBtn");
spinBtn.onclick = function () {
// 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
let result = document.querySelector(".result");
result.style.opacity = 1;
// Calculate sections for wheel 1 and wheel 2
let section1 = Math.floor(((3600 + value1 + 22.5) % 360) / 45) + 1;
let section2 = Math.floor(((3600 + value2 + 22.5) % 360) / 45) + 1;
// Set the result text for wheel 1
let resultText = "Wheel 1: Result " + section1 + " ";
// Append the result text for wheel 2 based on the section number
switch (section2) {
case 1:
resultText += "Wheel 2: Result 1";
break;
case 2:
resultText += "Wheel 2: Result 2";
break;
case 3:
resultText += "Wheel 2: Result 3";
break;
case 4:
resultText += "Wheel 2: Result 4";
break;
case 5:
resultText += "Wheel 2: Result 5";
break;
case 6:
resultText += "Wheel 2: Result 6";
break;
case 7:
resultText += "Wheel 2: Result 7";
break;
case 8:
resultText += "Wheel 2: Result 8";
break;
}
// Display the combined results
result.textContent = resultText;
// After a delay, change the result content to an image for the second spin
setTimeout(function () {
let imagePath = getImagePathForSection(section2);
result.innerHTML = '<img src="' + imagePath + '" alt="Result Image">';
}, 5000); // Adjust this time to match your wheel spin transition duration
};
// Function to get the image path based on the section number
function getImagePathForSection(section) {
// Add your logic here to map section numbers to image paths
// For example:
switch (section) {
case 1:
return "path/to/image1.png";
case 2:
return "path/to/image2.png";
case 3:
return "path/to/image3.png";
case 4:
return "path/to/image4.png";
case 5:
return "path/to/image5.png";
case 6:
return "path/to/image6.png";
case 7:
return "path/to/image7.png";
case 8:
return "path/to/image8.png";
default:
return "path/to/defaultImage.png"; // Default image if section is not mapped
}
}
</script>
</div>
</body>
</html>
```
In this code:
- After spinning the wheels, the result is displayed immediately with text for both wheels.
- After a delay of 5000 milliseconds (adjustable), the content of the result div is changed to display an image for the second wheel's result.
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