基于变量交付不同页面：HTML/JS双结果页面扩展至8选项技术问询

Got it, let's expand your spinner from 2 to 8 options and add variable-based page routing. Here's a complete, updated implementation that builds on your existing code structure, with clear explanations of the key changes:

Full Updated HTML/JavaScript Code #

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Fielder's Choice Spinner</title>
    <meta name="description" content="Instore spinner for FC">
    <meta name="author" content="Matthew Davis">
    <link href="style.css" rel="stylesheet">
    <!-- Complete the Google AJAX script (using jQuery for simplicity) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
    <div class="spinner-container">
        <h1>Fielder's Choice Spinner</h1>
        <button id="spin-btn">Spin the Wheel!</button>
        <div id="result-display" class="hidden"></div>
    </div>

    <script>
        // Define your 8 options, each mapped to a target page URL
        const spinnerOptions = [
            { label: "Free Drink", target: "free-drink.html" },
            { label: "10% Off", target: "10-off.html" },
            { label: "Free Side", target: "free-side.html" },
            { label: "Buy 1 Get 1", target: "bogof.html" },
            { label: "20% Off", target: "20-off.html" },
            { label: "Free Appetizer", target: "free-appetizer.html" },
            { label: "5% Off", target: "5-off.html" },
            { label: "Custom Prize", target: "custom-prize.html" }
        ];

        // Handle spin button click
        $("#spin-btn").click(function() {
            // Add user feedback during spin
            $(this).prop("disabled", true).text("Spinning...");
            
            // Simulate spinner animation delay (adjust timing as needed)
            setTimeout(() => {
                // Generate random index for 8 options (0-7)
                const randomIndex = Math.floor(Math.random() * spinnerOptions.length);
                const selectedOption = spinnerOptions[randomIndex];

                // Display the selected result
                $("#result-display").removeClass("hidden").html(`
                    <p>You won: <strong>${selectedOption.label}</strong></p>
                    <button id="redirect-btn">Claim Your Prize</button>
                `);

                // Redirect to the target page when user clicks the button
                $("#redirect-btn").click(function() {
                    window.location.href = selectedOption.target;
                });

                // Re-enable button for another spin
                $("#spin-btn").prop("disabled", false).text("Spin Again!");
            }, 1500);
        });
    </script>
</body>
</html>

Key Changes Explained #

• Expanded Options Array: Replaced the simple >/< check with an array of 8 objects, each containing a prize label and target page URL. This makes it trivial to add/remove options later.
• Random Selection: Used Math.random() and Math.floor() to pick a random index (0-7), ensuring equal probability for each option.
• User Experience: Added a spin delay to simulate animation, disabled the button during the spin, and clearly displayed the selected prize before redirecting.
• Variable-Based Page Delivery: Each option maps directly to a unique page—when the user clicks "Claim Your Prize", they're sent to the corresponding URL.

Bonus: Pre-Select an Option via Variable #

If you need to deliver a specific page based on an external variable (like a URL parameter), add this logic to automatically select an option without spinning:

// Get selection from URL parameter (example: ?prize=3)
const urlParams = new URLSearchParams(window.location.search);
const selectedPrizeIndex = parseInt(urlParams.get('prize')) - 1; // Convert to 0-based index

// Validate the index and load the target page
if (!isNaN(selectedPrizeIndex) && selectedPrizeIndex >= 0 && selectedPrizeIndex < spinnerOptions.length) {
    const selectedOption = spinnerOptions[selectedPrizeIndex];
    $("#result-display").removeClass("hidden").html(`
        <p>Your Pre-Selected Prize: <strong>${selectedOption.label}</strong></p>
        <button id="redirect-btn">Claim Now</button>
    `);
    $("#redirect-btn").click(() => window.location.href = selectedOption.target);
    $("#spin-btn").hide(); // Hide spin button if using pre-selection
}

内容的提问来源于stack exchange，提问作者M. Davis