作为程序员，没有合适的工具，就得手搓一个，PC端，移动端均可适用。废话不多说，直接上代码。
HTML:
<div class="calculator"><div class="display-wrapper"><div id="display" class="display">0</div></div><div class="buttons"><button onclick="clearDisplay()">C</button><button onclick="deleteLast()">←</button><button onclick="appendOperator('/')">/</button><button onclick="appendOperator('*')">*</button><button onclick="appendNumber('7')">7</button><button onclick="appendNumber('8')">8</button><button onclick="appendNumber('9')">9</button><button onclick="appendOperator('-')">-</button><button onclick="appendNumber('4')">4</button><button onclick="appendNumber('5')">5</button><button onclick="appendNumber('6')">6</button><button onclick="appendOperator('+')">+</button><button onclick="appendNumber('1')">1</button><button onclick="appendNumber('2')">2</button><button onclick="appendNumber('3')">3</button><button onclick="calculate()">=</button><button onclick="appendNumber('0')" class="zero">0</button><button onclick="appendDot()">.</button><button onclick="calculate()">=</button></div><div class="buttons scientific"><button onclick="calculateFunction('sin')">sin</button><button onclick="calculateFunction('cos')">cos</button><button onclick="calculateFunction('tan')">tan</button><button onclick="calculateFunction('log')">log</button><button onclick="calculateFunction('sqrt')">√</button><button onclick="calculateFunction('pow')">x²</button><button onclick="calculateFunction('exp')">eˣ</button><button onclick="calculateFunction('ln')">ln</button></div></div>
JS:
let displayValue = '0'; function updateDisplay() { document.getElementById('display').textContent = displayValue; } function clearDisplay() { displayValue = '0'; updateDisplay(); } function deleteLast() { if (displayValue.length > 1) { displayValue = displayValue.slice(0, -1); } else { displayValue = '0'; } updateDisplay(); } function appendNumber(number) { if (displayValue === '0') { displayValue = number; } else { displayValue += number; } updateDisplay(); } function appendOperator(operator) { displayValue += operator; updateDisplay(); } function appendDot() { if (!displayValue.includes('.')) { displayValue += '.'; } updateDisplay(); } function calculate() { try { displayValue = eval(displayValue).toString(); } catch (error) { displayValue = 'Error'; } updateDisplay(); } function calculateFunction(func) { try { let value = parseFloat(displayValue); switch (func) { case 'sin': displayValue = Math.sin(value).toString(); break; case 'cos': displayValue = Math.cos(value).toString(); break; case 'tan': displayValue = Math.tan(value).toString(); break; case 'log': displayValue = Math.log10(value).toString(); break; case 'sqrt': displayValue = Math.sqrt(value).toString(); break; case 'pow': displayValue = Math.pow(value, 2).toString(); break; case 'exp': displayValue = Math.exp(value).toString(); break; case 'ln': displayValue = Math.log(value).toString(); break; } } catch (error) { displayValue = 'Error'; } updateDisplay(); }
CSS:
.traditional-calculator .calculator { width: 100%; background-color: #333; border-radius: 10px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); } .traditional-calculator .display-wrapper { background-color: #444; padding: 20px; border-radius: 10px 10px 0 0; overflow-x: auto; overflow-y: hidden; } .traditional-calculator .display { color: white; font-size: 20px; text-align: right; white-space: nowrap; min-width: 100%; } .traditional-calculator .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; } .traditional-calculator button { font-size: 18px; padding: 20px; background-color: #555; margin: 0px!important; border: none; color: white; cursor: pointer; } .traditional-calculator button:hover { background-color: #666; } .traditional-calculator .zero { grid-column: span 2; } .traditional-calculator .scientific { grid-template-columns: repeat(4, 1fr); margin-top: 5px; }
