Question

我创造了硬币翻转，我们有两个方面可以选择一个是Global，另一个是Fortune。我使用<form>和<select>，在内部选择我添加了三个<option>

<option value="">Select Your Side</option>
<option value="Global">Global</option>
<option value="Fortune">Forutne</option>

但在我选择例如全局和按下按钮它翻转然后如果我将它改回选项“选择你的一面”它仍然翻转...它不应该翻转它。抱歉我的英文不好：/

Javascript / Jquery代码：

// JavaScript Document
// Resetting HTML after Result
var result,userchoice;
function resetAll(){
    var resetHTML = '<div class="tail"><img src="coin_F.png" /></div><div class="head"><img src="coin_G.png" /></div>';
    setTimeout(function(){
        $('.coinBox').fadeOut('slow',function(){
            $(this).html(resetHTML)
        }).fadeIn('slow',function(){
            $('#btnFlip').removeAttr('disabled');
        });
    },2500);
}
// Checking User Input
$(document).on('change','#userChoice', function(){
    userchoice = $(this).val();
    if(userchoice == "") {
        $(this).parent('p').prepend("<span class='text text-danger'>Please select a coin side to play the game</span>")
        $('#btnFlip').attr('disabled','disabled');
    } else {
        /**/
        $('#btnFlip').removeAttr('disabled');
        $(this).siblings('span').empty();
    }
    return userchoice;
});
// Final result declaration
function finalResult(result,userchoice){
    var resFormat = '<h3>';
    resFormat += '<span class="text text-primary">You choose : <u>'+userchoice+'</u></span> |';
    resFormat += '<span class="text text-danger"> Result : <u>'+result+'</u></span>';
    resFormat += '</h3>';
    var winr = '<h2 class="text text-success" style="color: #49DF3E;">You Won!!</h2>';
    var losr = '<h2 class="text text-danger" style="color: #c34f4f;">You Lost...</h2>';
    if(result == userchoice){
        $('.coinBox').append(resFormat+winr)
    } else{
        $('.coinBox').append(resFormat+losr)
    }
}
// Button Click Actions
$(document).on('click','#btnFlip',function() {
    var flipr = $('.coinBox>div').addClass('flip');
    var number = Math.floor(Math.random()*2);
    $(this).attr('disabled','disabled');
    setTimeout(function() {
        flipr.removeClass('flip');
        //result time
        if(number) {
            result = 'Global';
        //alert('Head = '+number);
            $('.coinBox').html('<img src="coin_G.png" /><h3 class="text-primary">Global</h3>');
            finalResult(result,userchoice);
            resetAll();
        } else {
            result = 'Fortune';
        //alert('Tail = '+number);
            $('.coinBox').html('<img src="coin_F.png" /><h3 class="text-primary">Fortune</h3>');
            finalResult(result,userchoice);
            resetAll();
        }
    },2000);
    return false;
});

#wrapper 
{
    width: 100%;
    height: auto;
    min-height: 500px;
}

.btn
{
    width: 12%;
    background-color: #c34f4f;
    color: white;
    padding: 14px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 22px;
}

.btn:hover
{
    background-color: #A64242;
}

input[type=submit]:hover {
    background-color: #A64242;
}

.container
{
    padding: 50px 0;
    text-align: center;
}

h1
{
    margin-bottom: 100px;
}

.head
{
    margin-top: -205px;
}

.flip img{animation: flipIt 0.5s linear infinite;}
.head img
{
    animation-delay: 0.25s;
}

@keyframes flipIt
{
    0%{width: 0px;
        height: 200px;}
    25%{width: 200px;
        height: 200px;}
    50%{width: 0px;
        height: 200px;}
    100%{width: 0px;
        height: 200px;}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrapper">
    <div class="container">
        <div class="row">
            <div class="col-lg-12">
                <h1>Coin Flip | <span>Global or Fortune</span></h1>
            </div>
            <div class="col-lg-12">
                <!--blank-->
                <div class="col-lg-4"></div>
                <!--coin-->
                <div class="col-lg-4">
                    <div class="coinBox">
                        <div class="tail">
                            <img src="coin_F.png" />
                        </div>
                        <div class="head">
                            <img src="coin_G.png" />
                        </div>
                    </div>
                </div>
                <!--user form elements-->
                <div class="col-lg-4 text-left">
                    <form>
                        <p>
                        <select class="form-control" id="userChoice">
                            <option value="">Select Your Side</option>
                            <option value="Global">Global</option>
                            <option value="Fortune">Forutne</option>
                        </select>
                        </p>
                        <p>
                            <button class="btn btn-lg btn-primary" id="btnFlip" disabled>Flip It</button>
                        </p>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

您也可以点击按钮进行安全检查。这样，它将始终在触发点击之前进行检查。

$(document).on('click','#btnFlip',function() {
    if($('#userChoice').val() == "") return;
    var flipr = $('.coinBox>div').addClass('flip');

请参阅此处的小提琴：https://jsfiddle.net/45t3th0n/

硬币翻转HTML / Javascript

1 个答案: