当点击按钮时,滚轮旋转,动画停止,调用函数,显示警报框,当我点击确定按钮时,滚轮重置为原始位置。我需要显示带有确定按钮的弹出框,而不是警报框,当我点击按钮时,滚轮重置为原始位置。
<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 />
<!-- <a href="#" onClick="resetWheel(); return false;">Play Again</a><br /> (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>
1条答案
按热度按时间57hvy0tb1#
试试甜蜜艺术2 SweetAlert2
只是复制粘贴这cdn链接到这html标题
并在要触发警报的位置使用以下代码