我用 JavaScript 制作了一個簡單的硬幣系統。為了進行升級,我制作了一個按鈕,當它超過 10 時就會啟用。為了永久實作這一點,我每毫秒運行一次這個函式:
window.setInterval(function(){
// My code is here
}, 1);
無論如何,有沒有一種更簡潔的方法來運行這個系統而不需要每毫秒運行一次函式?看起來這不是干凈的代碼
這是我為 Coin-System-Thing 撰寫的代碼:
var numberCounter = 0;
var number = document.getElementById("number");
function plusOne() {
numberCounter ;
number.innerHTML = numberCounter;
}
function minusOne() {
numberCounter--;
number.innerHTML = numberCounter;
}
/* Disable Buttons when below 10 */
window.setInterval(function(){
if(number.innerHTML <=9){
document.getElementById("enableMe").disabled = true;
} else {
document.getElementById("enableMe").disabled = false;
}
}, 1);
<button onclick="plusOne();"> 1</button>
<button onclick="minusOne();">-1</button>
<p id="number">0</p>
<button id="enableMe">Enabled when 10 or over</button>
提前致謝!
uj5u.com熱心網友回復:
只需單擊即可更新功能。無需每秒連續運行一個函式一千次。也從禁用按鈕開始(因為計數器從 0 開始)。
var numberCounter = 0;
var number = document.getElementById("number");
function plusOne() {
numberCounter ;
number.innerHTML = numberCounter;
updateButton();
}
function minusOne() {
numberCounter--;
number.innerHTML = numberCounter;
updateButton();
}
function updateButton() {
enableMe.disabled = ( number.innerHTML < 10)
}
<button onclick="plusOne();"> 1</button>
<button onclick="minusOne();">-1</button>
<p id="number">0</p>
<button id="enableMe" disabled>Enabled when 10 or over</button>
實際上,稍微優化一下,整個事情只需要一個函式和三行代碼:
var numberCounter = 0;
function change(amount) {
numberCounter = amount;
number.innerHTML = numberCounter;
enableMe.disabled = ( number.innerHTML < 10)
}
<button onclick="change(1)"> 1</button>
<button onclick="change(-1)">-1</button>
<p id="number">0</p>
<button id="enableMe" disabled>Enabled when 10 or over</button>
uj5u.com熱心網友回復:
1)只需創建一個enableButton如下所示的函式并在單擊 1和-1按鈕后呼叫它
function enableButton() {
if (number.innerHTML <= 9) {
document.getElementById("enableMe").disabled = true;
} else {
document.getElementById("enableMe").disabled = false;
}
};
或者
function enableButton() {
document.getElementById("enableMe").disabled = number.innerHTML <= 9;
};
2)您還必須在任何按鈕按下之前第一次處理案例,然后您只需呼叫該enableButton函式。
var numberCounter = 0;
var number = document.getElementById("number");
function plusOne() {
numberCounter ;
number.innerHTML = numberCounter;
enableButton()
}
function minusOne() {
numberCounter--;
number.innerHTML = numberCounter;
enableButton()
}
enableButton();
function enableButton() {
if (number.innerHTML <= 9) {
document.getElementById("enableMe").disabled = true;
} else {
document.getElementById("enableMe").disabled = false;
}
};
<button onclick="plusOne();"> 1</button>
<button onclick="minusOne();">-1</button>
<p id="number">0</p>
<button id="enableMe">Enabled when 10 or over</button>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/357526.html
標籤:javascript html
上一篇:使用for回圈顯示陣列
下一篇:我如何在c中創建一個計數器?
