当点击计数器为 100 且 jQuery/JavaScript 时启用按钮

Question

我最近一直在做一个小游戏。你有两个可以赚钱的按钮，一个有一个计时器，当计时器结束时你可以点击它，你的帐户会得到 +500 美元。

使用另一个按钮，您可以通过点击它来赚钱。每次点击您的帐户都会获得 +1 美元。

现在我想做一个让钱翻倍的按钮。为此，我制作了第三个按钮，上面写着“启用我”。

我想制作一个功能，当您的帐户结束时启用该按钮 0。你知道我该怎么做吗？

这是我的代码：

$(".addOneButton").click(function() {
        setCounter(getCounter() + 1);
    });

    function myFunction(){
        $(".addOneButton").click(function() {
            setCounter(getCounter() + 1);
        });
    }

    function hideUpgradeButton() {
        document.getElementById("upgrade").style.display = "none";
    }

    $('#btn').prop('disabled',true);
    startCountDown();

    function getCounter(){
        return  parseInt($('#counter').html());
    }
    function setCounter(count) {
        $('#counter').html(count);
    }

    $("#btn").click(function() {
        setCounter(getCounter() + 500);
        $('#btn').prop('disabled',true);
        startCountDown();
    });

    function startCountDown() {
        var counter = document.getElementById("counter")
        var minutes = 1,
            seconds = 30;
        $("#countdown").html(minutes + ":" + seconds);
        var count = setInterval(function() {
            if (parseInt(minutes) < 0 || parseInt(seconds) <=0 ) {
                $("#countdown").html("Collect" + " <i class=\"bi bi-unlock-fill\"></i>");
                clearInterval(count);
                $('#btn').prop('disabled',false);
            } else {
                $("#countdown").html(minutes + ":" + seconds + " <i class=\"bi bi-lock-fill\"></i>");
                seconds--;
                if (seconds < 10) seconds = "0" + seconds;
            }
            if(parseInt(minutes) === 1 && parseInt(seconds) === 0) {
                minutes = 0;
                seconds = 60
            }
            if(parseInt(counter) > 500){
                $("#upgrade").prop('disabled', false);
            }
        }, 1000);
    }

* {
        font-family: 'Roboto', sans-serif;
    }

    #total {
        display: flex;
        justify-content: center;
        margin: 0 auto;
        width: auto;
    }

    #border {
        border: 1px solid grey;
        padding: 0.2em 1em 0.2em 1em;
    }

   .inline {
       display: inline-block;
   }

   /*
   Timer Button Start
    */

   button:disabled {
       font-size: 25px;
       width: 200px;
       padding: 0.2em;
       background: #f54532;
       color: #d0d0d0;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       transition: all 0.3s;
       filter: grayscale(30%);
   }

    button {
       font-size: 25px;
       width: 200px;
       padding: 0.2em;
       background: #f54532;
       color: #fff;
       border: none;
       border-radius: 5px;
       cursor: pointer;
       transition: all 0.3s;
       margin: 0.5em;
        user-select: none;
    }

    button:enabled:hover {
       transform: scale(1.1);
   }

    button:enabled:active {
        transform: scale(0.9);
        filter: brightness(70%);
    }

    /*
   Timer Button End
    */

    .bi {
        font-size: 20px;
        display: inline-flex;
        align-items: center;
   }

   #centerButtons {
       display: flex;
       justify-content: center;
   }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">


<div id="total">
    <div id="border">
        <div class="inline" id="counter">0</div>
        <div class="inline" id="money">$</div>
    </div>
</div><br>

<div id="centerButtons">
<button id="btn">
    <span id="countdown">Collect</span>
</button>

<button class="addOneButton" onclick="setCounter()">Add One!</button>
</div>

<button id="upgrade" onclick="myFunction(); hideUpgradeButton()" disabled>Enable me!</button>

Answer 1

更改 getCounter：

 function getCounter(){
          var counter = parseInt($('#counter').html());
          if(parseInt(counter) > 99){
                $("#upgrade").prop('disabled', false);
            }
        return  counter;
    }

Answer 2

设置一个保存 increment 值的变量，以及一个让您启用该按钮两次的变量，

然后检查计数器是否 > 100 && 尚未启用，然后使用函数 myFunction()

递增 increment

PS 我编辑了计时器值：以快速进行测试：

见下文，片段：

var increment = 1;
var enabled = false; 

$(".addOneButton").click(function() {
  var count = getCounter();
  if(count > 100 && !enabled) {
    $("#upgrade").prop('disabled', false)
    enabled = true;
  }
  setCounter(count + increment);
});

function myFunction() {
  increment++;
}

function hideUpgradeButton() {
  document.getElementById("upgrade").style.display = "none";
}

$('#btn').prop('disabled', true);
startCountDown();

function getCounter() {
  return parseInt($('#counter').html());
}

function setCounter(count) {
  $('#counter').html(count);
}

$("#btn").click(function() {
  setCounter(getCounter() + 500);
  $('#btn').prop('disabled', true);
  startCountDown();
});

function startCountDown() {
  var counter = document.getElementById("counter")
  var minutes = 0,
    seconds = 10
  $("#countdown").html(minutes + ":" + seconds);
  var count = setInterval(function() {
    if (parseInt(minutes) < 0 || parseInt(seconds) <= 0) {
      $("#countdown").html("Collect" + " <i class=\"bi bi-unlock-fill\"></i>");
      clearInterval(count);
      $('#btn').prop('disabled', false);
    } else {
      $("#countdown").html(minutes + ":" + seconds + " <i class=\"bi bi-lock-fill\"></i>");
      seconds--;
      if (seconds < 10) seconds = "0" + seconds;
    }
    if (parseInt(minutes) === 1 && parseInt(seconds) === 0) {
      minutes = 0;
      seconds = 60
    }
    if (parseInt(counter) > 500) {
      $("#upgrade").prop('disabled', false);
    }
  }, 1000);
}

* {
  font-family: 'Roboto', sans-serif;
}

#total {
  display: flex;
  justify-content: center;
  margin: 0 auto;
  width: auto;
}

#border {
  border: 1px solid grey;
  padding: 0.2em 1em 0.2em 1em;
}

.inline {
  display: inline-block;
}


/*
   Timer Button Start
    */

button:disabled {
  font-size: 25px;
  width: 200px;
  padding: 0.2em;
  background: #f54532;
  color: #d0d0d0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  filter: grayscale(30%);
}

button {
  font-size: 25px;
  width: 200px;
  padding: 0.2em;
  background: #f54532;
  color: #fff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.3s;
  margin: 0.5em;
  user-select: none;
}

button:enabled:hover {
  transform: scale(1.1);
}

button:enabled:active {
  transform: scale(0.9);
  filter: brightness(70%);
}


/*
   Timer Button End
    */

.bi {
  font-size: 20px;
  display: inline-flex;
  align-items: center;
}

#centerButtons {
  display: flex;
  justify-content: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link href='http://fonts.googleapis.com/css?family=Roboto&subset=latin,greek,greek-ext,latin-ext,cyrillic' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css">


<div id="total">
  <div id="border">
    <div class="inline" id="counter">0</div>
    <div class="inline" id="money">$</div>
  </div>
</div><br>

<div id="centerButtons">
  <button id="btn">
    <span id="countdown">Collect</span>
</button>

  <button class="addOneButton" onclick="setCounter()">Add One!</button>
</div>

<button id="upgrade" onclick="myFunction(); hideUpgradeButton()" disabled>Enable me!</button>

当点击计数器为 100 且 jQuery/JavaScript 时启用按钮

Enable Button when click counter is at 100 with jQuery/JavaScript

html

javascript

double

jquery