使用jQuery/JavaScript在点击计数器为100时启用按钮

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

另一个按钮，你可以通过点击它赚钱。每点击一次，你的账户就会增加1美元。

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

我想做一个功能，当您的帐户超过$100时启用按钮。你知道我该怎么做吗?

下面是我的代码:

$(".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>

设置一个变量保存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>

change getCounter:

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

相关内容

最新更新

热门标签：