To display different types of content in the main wheel and the inner wheel, such as numbers in the main wheel and images in the inner wheel, you can modify the HTML and JavaScript accordingly. Here's how you can do it:
HTML:
```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">
<!-- Main wheel content -->
</div>
<div class="wheel inner">
<!-- Inner wheel content -->
</div>
<div class="result"></div>
<script type="text/javascript">
let spinBtn = document.querySelector(".spinBtn");
let result = document.querySelector(".result");
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
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 content for the main wheel
result.textContent = "Main Wheel: Result " + section1;
// Set the image source for the inner wheel
let imagePath = getImagePathForSection(section2);
result.innerHTML += '<img src="' + imagePath + '" alt="Result Image">'; // Append the image to the result
};
// 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";
// Add more cases as needed for other sections
default:
return "path/to/defaultImage.png"; // Default image if section is not mapped
}
}
</script>
</div>
</body>
</html>
```
In this code:
- The content of the main wheel is set using `result.textContent` to display the section number.
- The content of the inner wheel is set using `result.innerHTML` to display the image based on the section number.
- The `getImagePathForSection()` function is called to map each section number to the corresponding image path.
Replace `"path/to/image1.png"`, `"path/to/image2.png"`, and `"path/to/defaultImage.png"` with the actual paths to your images.
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