楊子霈HTML-CSS-JAVASCRIPT單一網頁計算器

程式碼

<!DOCTYPE html> <html lang="zh-TW"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JavaScript 單一網頁計算器</title> <style> /* 全局樣式設計 */ body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; background-color: #f0f2f5; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; } /* 計算器主外殼 */ .calculator { background-color: #1c1c1c; padding: 20px; border-radius: 20px; box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.3); width: 320px; } /* 顯示螢幕 */ .display { width: 100%; height: 80px; background-color: #1c1c1c; border: none; color: #ffffff; font-size: 2.5rem; text-align: right; padding: 0 10px; box-sizing: border-box; margin-bottom: 20px; pointer-events: none; /* 禁用鍵盤直接輸入螢幕 */ } /* 按鍵網格佈局 */ .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* 按鍵基礎樣式 */ button { padding: 20px 0; font-size: 1.5rem; border: none; border-radius: 50%; cursor: pointer; user-select: none; transition: background-color 0.1s ease; font-weight: bold; } button:active { filter: brightness(0.8); } /* 功能按鍵樣式 (C, Backspace) */ .btn-function { background-color: #a5a5a5; color: #000000; } /* 運算符號按鍵樣式 (+, -, *, /, =) */ .btn-operator { background-color: #ff9f0a; color: #ffffff; } /* 數字按鍵樣式 */ .btn-number { background-color: #333333; color: #ffffff; } /* 數字 0 按鍵特殊樣式（橫跨兩格） */ .btn-zero { grid-column: span 2; border-radius: 30px; padding-left: 25px; text-align: left; } </style> </head> <body> <div class="calculator"> <!-- 顯示螢幕 --> <input type="text" id="display" class="display" value="0" readonly> <!-- 按鍵區 --> <div class="buttons"> <button class="btn-function" onclick="clearDisplay()">C</button> <button class="btn-function" onclick="backspace()">⌫</button> <button class="btn-operator" onclick="appendOperator('%')">%</button> <button class="btn-operator" onclick="appendOperator('/')">÷</button> <button class="btn-number" onclick="appendNumber('7')">7</button> <button class="btn-number" onclick="appendNumber('8')">8</button> <button class="btn-number" onclick="appendNumber('9')">9</button> <button class="btn-operator" onclick="appendOperator('*')">×</button> <button class="btn-number" onclick="appendNumber('4')">4</button> <button class="btn-number" onclick="appendNumber('5')">5</button> <button class="btn-number" onclick="appendNumber('6')">6</button> <button class="btn-operator" onclick="appendOperator('-')">-</button> <button class="btn-number" onclick="appendNumber('1')">1</button> <button class="btn-number" onclick="appendNumber('2')">2</button> <button class="btn-number" onclick="appendNumber('3')">3</button> <button class="btn-operator" onclick="appendOperator('+')">+</button> <button class="btn-number btn-zero" onclick="appendNumber('0')">0</button> <button class="btn-number" onclick="appendDecimal('.')">.</button> <button class="btn-operator" onclick="calculate()">=</button> </div> </div> <script> const display = document.getElementById('display'); let currentInput = '0'; let shouldResetDisplay = false; // 輸入數字 function appendNumber(number) { if (currentInput === '0' || shouldResetDisplay) { currentInput = number; shouldResetDisplay = false; } else { currentInput += number; } updateDisplay(); } // 輸入小數點 function appendDecimal(dot) { if (shouldResetDisplay) { currentInput = '0.'; shouldResetDisplay = false; updateDisplay(); return; } // 尋找當前最後一個數字片段，避免重複輸入小數點 const parts = currentInput.split(/[\+\-\*\/%]/); const currentPart = parts[parts.length - 1]; if (!currentPart.includes('.')) { currentInput += dot; } updateDisplay(); } // 輸入運算符號 function appendOperator(operator) { if (shouldResetDisplay) shouldResetDisplay = false; const lastChar = currentInput.slice(-1); // 如果最後一個字元已經是運算子，則進行替換 if (['+', '-', '*', '/', '%'].includes(lastChar)) { currentInput = currentInput.slice(0, -1) + operator; } else { currentInput += operator; } updateDisplay(); } // 清除所有內容 (C) function clearDisplay() { currentInput = '0'; updateDisplay(); } // 倒退刪除 (⌫) function backspace() { if (currentInput.length > 1) { currentInput = currentInput.slice(0, -1); } else { currentInput = '0'; } updateDisplay(); } // 計算最終結果 function calculate() { try { // 安全防護：只允許數學運算字元，防止惡意 XSS 注入 const sanitizedInput = currentInput.replace(/[^0-9\+\-\*\/\.\%]/g, ''); // 使用 Function 代替 eval，安全性與效能更佳 let result = new Function(`return ${sanitizedInput}`)(); // 處理浮點數精準度問題 (例如 0.1 + 0.2) if (result !== undefined) { currentInput = parseFloat(result.toFixed(10)).toString(); } else { currentInput = 'Error'; } } catch (error) { currentInput = 'Error'; } shouldResetDisplay = true; updateDisplay(); } // 更新螢幕畫面 function updateDisplay() { // 將內部的乘除符號轉換為易讀的畫面上顯示 let displayString = currentInput .replace(/\*/g, ' × ') .replace(/\//g, ' ÷ ') .replace(/\+/g, ' + ') .replace(/\-/g, ' - ') .replace(/%/g, ' % '); display.value = displayString; } </script> </body> </html>