使用HTML和JavaScript實現一個簡單的計算器。
一、繪制鍵盤
<!DOCTYPE html>
<html>
<head><title>Simple Calculator</title><style>.calculator {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 5px;padding: 10px;}.calculator button {width: 100%;height: 40px;}</style>
</head>
<body><h1>Simple Calculator</h1><div class="calculator"><button onclick="clearDisplay()">C</button><button onclick="deleteLastCharacter()">←</button><button onclick="appendCharacter('/')">/</button><button onclick="appendCharacter('7')">7</button><button onclick="appendCharacter('8')">8</button><button onclick="appendCharacter('9')">9</button><button onclick="appendCharacter('*')">*</button><button onclick="appendCharacter('4')">4</button><button onclick="appendCharacter('5')">5</button><button onclick="appendCharacter('6')">6</button><button onclick="appendCharacter('-')">-</button><button onclick="appendCharacter('1')">1</button><button onclick="appendCharacter('2')">2</button><button onclick="appendCharacter('3')">3</button><button onclick="appendCharacter('+')">+</button><button onclick="appendCharacter('0')">0</button><button onclick="appendCharacter('.')">.</button><button onclick="calculateResult()">=</button></div><script>var display = "";function appendCharacter(character) {display += character;updateDisplay();}function deleteLastCharacter() {display = display.slice(0, -1);updateDisplay();}function clearDisplay() {display = "";updateDisplay();}function calculateResult() {var result;try {result = eval(display);} catch (error) {result = "Error";}display = result.toString();updateDisplay();}function updateDisplay() {var displayElement = document.getElementById("display");displayElement.textContent = display;}</script>
</body>
</html>
這段代碼會在瀏覽器中創建一個標題為"Simple Calculator"的頁面。頁面頂部有一個 <h1> 元素，用于顯示標題。計算器界面使用了CSS網格布局，將按鈕排列為4列。
在JavaScript部分，定義了一些函數來處理計算器的操作。appendCharacter() 函數用于將字符添加到顯示屏上；deleteLastCharacter() 函數用于刪除最后一個字符；clearDisplay() 函數用于清空顯示屏；calculateResult() 函數用于計算結果，并將結果顯示在顯示屏上；updateDisplay() 函數用于更新顯示屏的內容。
二、完整代碼
<!DOCTYPE html>
<html>
<head><title>Simple Calculator</title><style>.calculator {display: grid;grid-template-columns: repeat(4, 1fr);grid-gap: 5px;padding: 10px;}.calculator button {width: 100%;height: 40px;}</style>
</head>
<body><h1>Simple Calculator</h1><div class="calculator"><input type="text" id="display" readonly><button onclick="appendCharacter('7')">7</button><button onclick="appendCharacter('8')">8</button><button onclick="appendCharacter('9')">9</button><button onclick="appendCharacter('/')">/</button><button onclick="appendCharacter('4')">4</button><button onclick="appendCharacter('5')">5</button><button onclick="appendCharacter('6')">6</button><button onclick="appendCharacter('*')">*</button><button onclick="appendCharacter('1')">1</button><button onclick="appendCharacter('2')">2</button><button onclick="appendCharacter('3')">3</button><button onclick="appendCharacter('-')">-</button><button onclick="appendCharacter('0')">0</button><button onclick="appendCharacter('.')">.</button><button onclick="appendCharacter('+')">+</button><button onclick="deleteLastCharacter()">←</button><button onclick="clearDisplay()">C</button><button onclick="calculateResult()">=</button></div><script>var display = "";function appendCharacter(character) {display += character;updateDisplay();}function deleteLastCharacter() {display = display.slice(0, -1);updateDisplay();}function clearDisplay() {display = "";updateDisplay();}function calculateResult() {var result;try {result = eval(display);} catch (error) {result = "Error";}display = result.toString();updateDisplay();}function updateDisplay() {var displayElement = document.getElementById("display");displayElement.value = display;}</script>
</body>
</html>
代碼在 <div class="calculator"> 中添加了一個 <input> 元素，用于顯示計算器的輸入和結果。這個 <input> 元素使用 readonly 屬性，以防止直接編輯。
以上代碼可以在瀏覽器中運行，可以通過點擊按鈕來輸入數字和運算符。顯示屏會實時更新，能夠計算結果。
