javascript 滚轮旋转,当动画停止时,调用函数并显示警报,当旋转滚轮动画停止时,显示弹出框而不是警报框

9rygscc1  于 2022-12-25  发布在  Java
关注(0)|答案(1)|浏览(80)

当点击按钮时,滚轮旋转,动画停止,调用函数,显示警报框,当我点击确定按钮时,滚轮重置为原始位置。我需要显示带有确定按钮的弹出框,而不是警报框,当我点击按钮时,滚轮重置为原始位置。

<section id="background-image">
            <div id="responsive" align="center">
                <div>
                    <h5 style="color: transparent;">Stop At:</h5>
                    <input id="wow" type="text">
                </div>
    
                <div class="wheel-container">
                    <div class="spin-needle">
                        <img src="pin.png" />
                    </div>
                    <table cellpadding="0" cellspacing="0" border="0">
                        <tr>
                            <td>
                                <div class="power_controls">
                                    <br />
                                    <br />
                                    <img id="spin_button" src="spin.png" alt="Spin" onClick="startSpin();" />
                                    <br /><br />
                                    <!--&nbsp;&nbsp;<a href="#" onClick="resetWheel(); return false;">Play Again</a><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;(reset)-->
                                </div>
                            </td>
                            <td class="spinbg" width="438" height="582" class="the_wheel" align="center" valign="center">
                                <canvas id="canvas" width="434" height="434">
                                    <p style="color: white;" align="center">Sorry, your browser doesn't support canvas. Please try another.</p>
                                </canvas>
                            </td>
                        </tr>
                    </table>
                </div>

            </div>
        </section>

        <script>
            // Create new wheel object specifying the parameters at creation time.
            let theWheel = new Winwheel({
                'numSegments'  : 8,     // Specify number of segments.
                'outerRadius'  : 212,   // Set outer radius so wheel fits inside the background.
                'textFontSize' : 28,    // Set font size as desired.
                'segments'     :        // Define segments including colour and text.
                [
                   {'fillStyle' : '#29d20a', 'text' : 'Prize 1'},
                   {'fillStyle' : '#0262e1', 'text' : 'Prize 2'},
                   {'fillStyle' : '#9a04aa', 'text' : 'Prize 3'},
                   {'fillStyle' : '#d50108', 'text' : 'Prize 4'},
                   {'fillStyle' : '#dfb201', 'text' : 'Prize 5'},
                   {'fillStyle' : '#29d20a', 'text' : 'Prize 6'},
                   {'fillStyle' : '#0262e1', 'text' : 'Prize 7'},
                   {'fillStyle' : '#9a04aa', 'text' : 'Prize 8'}
                ],
                'animation' :           // Specify the animation to use.
                {
                    'type'     : 'spinToStop',
                    'duration' : 5,     // Duration in seconds.
                    'spins'    : 8,     // Number of complete spins.
                    'callbackFinished' : alertPrize
                }
            });

            // Vars used by the code in this page to do power controls.
            let wheelPower    = 0;
            let wheelSpinning = false;

            function startSpin()
            {
                var value = document.getElementById('wow').value
                // Ensure that spinning can't be clicked again while already running.
                value = (parseInt(value)) - 1
                console.log(value)
                let stopAt = ((value*45)+1 + Math.floor((Math.random() * (43))))
                console.log(stopAt)
                // Important thing is to set the stopAngle of the animation before stating the spin.
                theWheel.animation.stopAngle = stopAt;

                // May as well start the spin from here.
                theWheel.startAnimation();
            }

            function alertPrize(indicatedSegment)
            {
                alert("You have won " + indicatedSegment.text);

                
                theWheel.stopAnimation(false);  // Stop the animation, false as param so does not call callback function.
                theWheel.rotationAngle = 0;     // Re-set the wheel angle to 0 degrees.
                theWheel.draw();    
                wheelSpinning = false;    
            }
        </script>
57hvy0tb

57hvy0tb1#

试试甜蜜艺术2 SweetAlert2
只是复制粘贴这cdn链接到这html标题

<script src="//cdn.jsdelivr.net/npm/sweetalert2@11"></script>

并在要触发警报的位置使用以下代码

Swal.fire(
  'Good job!',
  'You clicked the button!',
  'success'
)

相关问题