1. 顯示變數(shù)和運算符

displayValue 變數(shù)儲存螢幕上要顯示的目前值，確保計算過程中的準確更新。 lastOperator 變數(shù)追蹤最後使用的操作符，防止連續(xù)操作符輸入等錯誤。此外，console.log 用於調(diào)試目的，特別是記錄CalculatorBtns 節(jié)點列表以供審查。

1. 按鈕點擊事件監(jiān)聽器/循環(huán)每個按鈕

forEach方法用於循環(huán)遍歷calculatorBtns集合中的每個按鈕。對於每個按鈕，innerText屬性被分配給buttonValue變量，該變量保存按鈕上顯示的文本，例如“AC”，“C”，“9”，“ ”等

然後將 onclick 事件偵聽器新增至每個按鈕。單擊按鈕時，將執(zhí)行已指派的功能。此函數(shù)handleButtonAction(buttonValue) 將按鈕的文字(buttonValue) 作為參數(shù)。透過傳遞按鈕的值，該函數(shù)允許計算器執(zhí)行正確的操作，例如清除顯示、輸入數(shù)字或執(zhí)行數(shù)學運算。

1. 處理鍵盤輸入的按鍵

這使得計算器也可以與鍵盤一起使用。當按下某個鍵時，會觸發(fā)對應按鈕的操作。例如，按下鍵盤上的「1」將觸發(fā)值為「1」的handleButtonAction()函數(shù)。

1. 顯示功能

display()函數(shù)用目前的displayValue更新顯示框(displayBox)的內(nèi)容。如果displayValue為空，則預設顯示「0.0」。

1. 按鈕操作處理程序（主要邏輯）：

程式碼執(zhí)行幾個步驟來更新計算器的顯示並處理計算。首先，eval(displayValue) 計算儲存在displayValue 中的數(shù)學運算式。例如，如果顯示“3 5”，則 eval 計算並傳回結果，在本例中為 8。

接下來，displayValue = String(result) 將結果轉換為字串並更新displayValue 以在螢幕上顯示結果。計算完成後，lastOperator = "" 將lastOperator 重設為空字串，確保清除任何先前的運算子。最後，display()函數(shù)更新顯示以顯示計算結果。

1. AC（全部清除）和 C（清除）按鈕邏輯

點選「AC」按鈕時，程式碼檢查buttonValue是否等於「AC」。如果為 true，它將將 displayValue 重置為空字串，從而有效地清除整個顯示並重置計算器。然後呼叫 display() 函數(shù)以空值更新顯示。

對於“C”按鈕，如果buttonValue是“C”，程式碼使用slice(0, -1)從displayValue刪除最後一個字元。這允許用戶刪除最後一個輸入或字符，並再次調(diào)用 display() 函數(shù)以相應地更新顯示。

1. 驗證運算子

此條件用於驗證是否可以根據(jù)目前顯示的值按下操作符。

條件 ["%", "/", "*", " "].includes(buttonValue) 檢查點選的按鈕是否為運算子之一 (%, /, *, )。如果該按鈕是運算符，則下一步檢查 if (!displayValue || displayValue === "-") 確保在顯示為空或僅包含減號 (-) 時無法按下該運算符。這可以防止出現(xiàn)諸如具有兩個連續(xù)運算符或以一個運算符開頭之類的錯誤。如果條件為真，則函數(shù)將簡單返回，並且不會將任何運算符添加到顯示中。

1. 防止連續(xù)運算子

此程式碼區(qū)塊處理連續(xù)按下運算子的情況，防止無效輸入，例如「 」或「 -?！?/p>

首先，if (["%", "/", "*", " ", "-"].includes(buttonValue)) 檢查點選的按鈕是否為運算子。然後， const lastCharacter = displayValue.slice(-1) 檢索 displayValue 中目前表達式的最後一個字元。

接下來，lastOperator = buttonValue 更新lastOperator 變數(shù)以儲存目前運算元。如果最後一個字元也是運算子（透過if (["%", "/", "*", " ", "-"].includes(lastCharacter)) 檢查），則程式碼使用displayValue.slice( 0, -1)。這可確保表達式末尾僅出現(xiàn)一個運算符，並防止添加連續(xù)的運算符。

1. 驗證小數(shù)點

此程式碼區(qū)塊確保小數(shù)點 (.) 在數(shù)字中只能出現(xiàn)一次，從而防止像「3..5.」這樣的無效輸入

首先，條件 if (buttonValue === ".") 檢查點擊的按鈕是否為小數(shù)點。如果是，則繼續(xù)進行驗證。

接下來， const lastOperatorIndex = displayValue.lastIndexOf(lastOperator) 尋找最後一個運算子在 displayValue 中的位置。然後， const currentNumberSet = displayValue.slice(lastOperatorIndex) || displayValue 提取最後一個運算子之後的 displayValue 部分，該部分錶示當前輸入的數(shù)字。如果沒有運算符，則考慮整個 displayValue。

最後，if (currentNumberSet.includes(".")) 檢查擷取的數(shù)字部分是否已包含小數(shù)點。如果是這樣，函數(shù)會提前返回，從而防止使用者輸入第二個小數(shù)點。這可確?！?.5」等數(shù)字有效，但「3..5」等輸入無效。

1. 用新值更新顯示：

程式碼displayValue = displayValue buttonValue;將按下的按鈕的值（例如數(shù)字或運算子）附加到現(xiàn)有的 displayValue 字串。當使用者與計算器互動時，這會建立當前表達式或數(shù)字。

附加按鈕值後，呼叫display()函數(shù)來更新顯示，確保它反映更新的displayValue。這可確保使用者在輸入時看到最新的值或表達式。

結論

此 JavaScript 程式碼處理在計算器中顯示值、執(zhí)行計算、清除輸入和驗證表達式的邏輯。它適用於按鈕點擊和鍵盤輸入。主要功能包括按下「=」或「Enter」鍵時執(zhí)行計算、處理AC（全部清除）和C（清除最後一個字元）按鈕，以及防止無效操作，例如連續(xù)運算符或多個小數(shù)點。此外，每次操作後都會更新顯示，確保使用者看到最新的值或表達式。這些功能共同為功能性和互動式計算器奠定了基礎。

下面是我的演示鏈接，因此請隨意查看完整程式碼、克隆存儲庫或與實時演示進行交互?？鞓肪幋a！
GITHUB - [https://github.com/bigyan1997/calculator]
VERCEL - [https://calculator-delta-sepia-91.vercel.app/]