科学计算器 HTML 实现
下面是一个美观且易于嵌套的科学计算器 HTML 实现。这个计算器具有标准计算和科学计算功能，设计简洁，可以直接嵌入到其他 HTML 页面中。
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>科学计算器</title><style>:root {--primary-color: #4285f4;--secondary-color: #f1f3f4;--accent-color: #fbbc05;--text-color: #202124;--button-hover: #e8eaed;}.calculator-container {font-family: 'Roboto', Arial, sans-serif;max-width: 320px;margin: 20px auto;border-radius: 10px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);overflow: hidden;background: white;}.calculator-display {padding: 20px;text-align: right;background-color: var(--secondary-color);border-bottom: 1px solid #ddd;}.calculator-history {min-height: 20px;font-size: 14px;color: #70757a;margin-bottom: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}.calculator-output {font-size: 28px;font-weight: 500;color: var(--text-color);overflow: hidden;text-overflow: ellipsis;}.calculator-buttons {display: grid;grid-template-columns: repeat(5, 1fr);gap: 1px;background-color: #ddd;}.calculator-button {border: none;padding: 15px 0;font-size: 16px;cursor: pointer;background-color: white;transition: background-color 0.2s;}.calculator-button:hover {background-color: var(--button-hover);}.calculator-button.operator {background-color: var(--secondary-color);}.calculator-button.equals {background-color: var(--primary-color);color: white;}.calculator-button.function {background-color: var(--secondary-color);font-size: 14px;}.calculator-button.accent {color: var(--accent-color);}.calculator-mode-toggle {display: flex;border-bottom: 1px solid #ddd;}.mode-button {flex: 1;padding: 10px;text-align: center;cursor: pointer;background: none;border: none;font-size: 14px;transition: background-color 0.2s;}.mode-button.active {background-color: var(--secondary-color);font-weight: 500;}.mode-button:hover {background-color: var(--button-hover);}.scientific-buttons {display: none;}.scientific-mode .scientific-buttons {display: block;}.standard-mode .scientific-buttons {display: none;}</style>
</head>
<body><div class="calculator-container" id="calculator"><div class="calculator-mode-toggle"><button class="mode-button active" data-mode="standard">标准</button><button class="mode-button" data-mode="scientific">科学</button></div><div class="calculator-display"><div class="calculator-history" id="history"></div><div class="calculator-output" id="output">0</div></div><div class="calculator-buttons"><!-- 科学计算按钮 --><div class="scientific-buttons"><button class="calculator-button function" onclick="addToExpression('Math.sin(')">sin</button><button class="calculator-button function" onclick="addToExpression('Math.cos(')">cos</button><button class="calculator-button function" onclick="addToExpression('Math.tan(')">tan</button><button class="calculator-button function" onclick="addToExpression('Math.log(')">ln</button><button class="calculator-button function" onclick="addToExpression('Math.sqrt(')">√</button><button class="calculator-button function" onclick="addToExpression('Math.asin(')">sin⁻¹</button><button class="calculator-button function" onclick="addToExpression('Math.acos(')">cos⁻¹</button><button class="calculator-button function" onclick="addToExpression('Math.atan(')">tan⁻¹</button><button class="calculator-button function" onclick="addToExpression('Math.log10(')">log</button><button class="calculator-button function" onclick="addToExpression('**2')">x²</button><button class="calculator-button function" onclick="addToExpression('Math.PI')">π</button><button class="calculator-button function" onclick="addToExpression('Math.E')">e</button><button class="calculator-button function" onclick="addToExpression('(')">(</button><button class="calculator-button function" onclick="addToExpression(')')">)</button><button class="calculator-button function" onclick="addToExpression('**')">x^y</button></div><!-- 标准计算按钮 --><button class="calculator-button operator" onclick="clearAll()">AC</button><button class="calculator-button operator" onclick="backspace()">⌫</button><button class="calculator-button operator" onclick="addToExpression('%')">%</button><button class="calculator-button operator" onclick="addToExpression('/')">÷</button><button class="calculator-button function" onclick="addToExpression('1/')">1/x</button><button class="calculator-button" onclick="addToExpression('7')">7</button><button class="calculator-button" onclick="addToExpression('8')">8</button><button class="calculator-button" onclick="addToExpression('9')">9</button><button class="calculator-button operator" onclick="addToExpression('*')">×</button><button class="calculator-button function" onclick="addToExpression('Math.abs(')">|x|</button><button class="calculator-button" onclick="addToExpression('4')">4</button><button class="calculator-button" onclick="addToExpression('5')">5</button><button class="calculator-button" onclick="addToExpression('6')">6</button><button class="calculator-button operator" onclick="addToExpression('-')">-</button><button class="calculator-button function" onclick="addToExpression('!')">x!</button><button class="calculator-button" onclick="addToExpression('1')">1</button><button class="calculator-button" onclick="addToExpression('2')">2</button><button class="calculator-button" onclick="addToExpression('3')">3</button><button class="calculator-button operator" onclick="addToExpression('+')">+</button><button class="calculator-button function" onclick="addToExpression('10**')">10^x</button><button class="calculator-button" onclick="addToExpression('0')" style="grid-column: span 2;">0</button><button class="calculator-button" onclick="addToExpression('.')">.</button><button class="calculator-button equals" onclick="calculate()" style="grid-column: span 2;">=</button></div></div><script>let currentExpression = '';let isScientificMode = false;// 获取DOM元素const outputElement = document.getElementById('output');const historyElement = document.getElementById('history');const calculatorElement = document.getElementById('calculator');const modeButtons = document.querySelectorAll('.mode-button');// 切换计算器模式modeButtons.forEach(button => {button.addEventListener('click', () => {modeButtons.forEach(btn => btn.classList.remove('active'));button.classList.add('active');calculatorElement.classList.remove('standard-mode', 'scientific-mode');calculatorElement.classList.add(`${button.dataset.mode}-mode`);isScientificMode = button.dataset.mode === 'scientific';});});// 添加到表达式function addToExpression(value) {if (currentExpression === '0' && !isNaN(value)) {currentExpression = value;} else {currentExpression += value;}updateDisplay();}// 清除所有function clearAll() {currentExpression = '0';historyElement.textContent = '';updateDisplay();}// 退格function backspace() {if (currentExpression.length === 1) {currentExpression = '0';} else {currentExpression = currentExpression.slice(0, -1);}updateDisplay();}// 计算阶乘function factorial(n) {if (n < 0) return NaN;if (n === 0 || n === 1) return 1;let result = 1;for (let i = 2; i <= n; i++) {result *= i;}return result;}// 计算表达式function calculate() {try {// 替换特殊函数和符号let expression = currentExpression.replace(/(\d+)!/g, (_, n) => `factorial(${n})`).replace(/\^/g, '**');// 保存历史historyElement.textContent = currentExpression + ' =';// 计算并显示结果const result = eval(expression);currentExpression = result.toString();updateDisplay();} catch (error) {currentExpression = 'Error';updateDisplay();setTimeout(clearAll, 1000);}}// 更新显示function updateDisplay() {outputElement.textContent = currentExpression;}// 键盘支持document.addEventListener('keydown', (e) => {const key = e.key;if (/[0-9]/.test(key)) {addToExpression(key);} else if (key === '.') {addToExpression('.');} else if (key === '+' || key === '-' || key === '*' || key === '/') {addToExpression(key);} else if (key === '%') {addToExpression('%');} else if (key === '(' || key === ')') {addToExpression(key);} else if (key === 'Enter' || key === '=') {calculate();} else if (key === 'Backspace') {backspace();} else if (key === 'Escape') {clearAll();} else if (key === '^') {addToExpression('**');}});</script>
</body>
</html>
特点说明
-
美观设计：
- 采用Material Design风格，配色协调
- 圆角边框和阴影效果
- 响应式设计，适应不同屏幕尺寸
-
功能完善：
- 标准计算功能（加减乘除、百分比等）
- 科学计算功能（三角函数、对数、幂运算、阶乘等）
- 计算历史显示
- 键盘支持
-
易于嵌套：
- 所有代码包含在一个独立的容器中
- 不会影响外部页面的样式
- 可以轻松复制到任何HTML页面中
-
模式切换：
- 标准模式和科学模式一键切换
- 科学计算按钮在不使用时隐藏
使用方法
- 直接将上述代码复制到您的HTML文件中
- 或者将代码保存为单独的HTML文件，然后使用iframe嵌入到其他页面中：
<iframe src="calculator.html" width="350" height="550" frameborder="0"></iframe>
这个计算器完全使用原生HTML、CSS和JavaScript实现，无需任何外部依赖，可以直接在任何现代浏览器中运行。
