Question

我的硬币翻转需要帮助。基本上我想要做的是创建两个按钮。通过按其中一个，玩家将选择一方，例如Global或Fortune。

我无法弄清楚如何操作，所以当玩家按下按钮时，它实际上会选择一侧而不刷新网站。

＆＃13;

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() {
  if ($('#userChoice').val() == "") return;
  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;
});

＆＃13;

#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;}
}

＆＃13;

<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">
          <p>
            <div class="form-control">
              <button name="Global" id="userChoice">Global</button>
              <button name="Fortune" id="userChoice">Fortune</button>
            </div>
            <p>
              <button class="btn btn-lg btn-primary" id="btnFlip" disabled>Flip It</button>
            </p>
        </div>
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 1

尝试这样的事情：

<强> HTML

<div class="choices">
  <button name="Heads">Heads</button>
  <button name="Tails">Tails</button>
  <p>You have chosen: <span class="choice"></span></p>
</div>

<div class="flip">
  <button class="disabled">Flip Coin</button>
  <p></p>
</div>

<强> CSS

.flip button {
  background: #cc0000;
  color: #fff;
  padding: 5px;
}

.flip button.disabled {
  cursor: not-allowed;
  background: #ccc;
  color: #eee;
}

<强> JS

$(function() {

  $(".choices button").on("click", function() {
    var choice = $(this).attr("name");

    //show selected choice
    $(".choice").text(choice);

    //enable flip button
    $(".flip button").removeClass("disabled");
  });

  $(".flip button").on("click", function() {
    //flip coin if a choice has been made
    if(!$(this).hasClass("disabled")) {
      //get random number
      var flip = Math.floor(Math.random() * 2) + 1;

      //determine side of coin and result of guess (ternary)
      var flipSide = flip == 1 ? "Heads" : "Tails";
      var result = flipSide == $(".choice").text() ? "correct" : "wrong";

      //show flip result
      $(".flip p").text(flipSide + ", you chose " + result);
    }
  });

});

你也可以在这里查看它：https://jsfiddle.net/8jw1ogLd/

如何在按钮单击时阻止页面刷新

1 个答案: