<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>CyberCalc Pro</title>
<style>
:root {
--neon-blue: #00f3ff;
--neon-purple: #bc13fe;
--dark-bg: #0a0a0f;
}
body {
margin: 0;
background: var(--dark-bg);
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
font-family: 'Consolas', monospace;
color: var(--neon-blue);
}
.calculator {
background: linear-gradient(145deg, #111122, #000011);
padding: 2rem;
border-radius: 15px;
border: 2px solid var(--neon-blue);
box-shadow: 0 0 30px var(--neon-blue);
width: 800px;
}
#display {
background: rgba(0, 20, 30, 0.9);
padding: 1.5rem;
margin-bottom: 1.5rem;
border-radius: 8px;
font-size: 2.5em;
text-align: right;
border: 1px solid var(--neon-purple);
text-shadow: 0 0 10px var(--neon-blue);
white-space: nowrap;
overflow-x: auto;
}
.grid {
display: grid;
grid-template-columns: repeat(8, 1fr);
gap: 0.8rem;
}
button {
padding: 1.2em 0.5em;
background: rgba(0, 50, 80, 0.3);
border: 1px solid var(--neon-blue);
color: var(--neon-blue);
border-radius: 5px;
font-size: 1.2em;
cursor: pointer;
transition: all 0.2s;
position: relative;
overflow: hidden;
}
button:hover {
background: rgba(0, 100, 150, 0.4);
box-shadow: 0 0 15px var(--neon-blue);
transform: scale(1.05);
}
button::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(45deg,
transparent,
var(--neon-blue),
transparent);
transform: rotate(45deg);
opacity: 0.3;
}
.operator {
color: var(--neon-purple);
border-color: var(--neon-purple);
}
#errorMsg {
color: #ff0033;
text-align: center;
min-height: 1.5em;
margin-top: 1rem;
text-shadow: 0 0 10px #ff0033;
}
</style>
</head>
<body>
<body>
<div class="calculator">
<div id="display">0</div>
<div class="grid">
<!-- 第一行运算符号 -->
<button class="operator" onclick="clearDisplay()">C</button>
<button class="operator" onclick="addToDisplay('(')">(</button>
<button class="operator" onclick="addToDisplay(')')">)</button>
<button class="operator" onclick="addOperation('^')">x^y</button>
<button class="operator" onclick="addOperation('√')">√</button>
<button class="operator" onclick="addOperation('!')">n!</button>
<button class="operator" onclick="addOperation('%')">%</button>
<button class="operator" onclick="addOperation('π')">π</button>
<!-- 第二行运算符号 -->
<button onclick="addOperation('sin(')">sin</button>
<button onclick="addOperation('cos(')">cos</button>
<button onclick="addOperation('tan(')">tan</button>
<button onclick="addOperation('log(')">log</button>
<button onclick="addOperation('ln(')">ln</button>
<button onclick="addOperation('e')">e</button>
<button class="operator" onclick="addOperation('/')">÷</button>
<button class="operator" onclick="addOperation('*')">×</button>
<!-- 第三行：添加7-8-9 -->
<button onclick="addNumber(7)">7</button>
<button onclick="addNumber(8)">8</button>
<button onclick="addNumber(9)">9</button>
<button onclick="addOperation('Math.PI')">π</button>
<button onclick="addOperation('Math.E')">e</button>
<button class="operator" onclick="addOperation('-')">-</button>
<button class="operator" onclick="addOperation('+')">+</button>
<button class="operator" onclick="calculate()">=</button>
<!-- 第四行：4-5-6 -->
<button onclick="addNumber(4)">4</button>
<button onclick="addNumber(5)">5</button>
<button onclick="addNumber(6)">6</button>
<button onclick="addOperation('.')">.</button>
<button onclick="addOperation('1/')">1/x</button>
<button onclick="addOperation('²')">x²</button>
<button onclick="addOperation('³')">x³</button>
<button class="operator" onclick="backspace()">⌫</button>
<!-- 第五行：1-2-3 -->
<button onclick="addNumber(1)">1</button>
<button onclick="addNumber(2)">2</button>
<button onclick="addNumber(3)">3</button>
<button onclick="addNumber(0)">0</button>
<button onclick="addOperation('10^')">10^x</button>
<button onclick="addOperation('²√')">²√</button>
<button onclick="addOperation('³√')">³√</button>
<button onclick="addOperation('mod')">mod</button>
</div>
<div id="errorMsg"></div>
</div>
<script>
function addNumber(num) {
if (display.textContent === '0' && num !== 0) {
display.textContent = '';
}
display.textContent += num;
updateBracketStatus();
}
</script>
</body>
</html>
<div id="errorMsg">
</div>
<script>
let openBrackets = 0;
const display = document.getElementById('display');
// 智能括号补全系统
function autoCompleteBrackets() {
const current = display.textContent;
const lastChar = current.slice(-1);
if (lastChar === '(') {
openBrackets++;
return ')';
}
return '';
}
function updateBracketStatus() {
const expr = display.textContent;
openBrackets = (expr.match(/\(/g) || []).length - (expr.match(/\)/g) || []).length;
}
function addNumber(num) {
if (display.textContent === '0') display.textContent = '';
display.textContent += num;
updateBracketStatus();
}
function addOperation(op) {
let appendValue = op;
const lastChar = display.textContent.slice(-1);
const operators = ['+', '-', '*', '/', '^'];
if (operators.includes(lastChar) && operators.includes(op)) {
display.textContent = display.textContent.slice(0, -1);
}
if (op.endsWith('(')) {
openBrackets++;
appendValue += ')';
}
display.textContent += appendValue;
updateBracketStatus();
}
function calculate() {
try {
let expr = display.textContent
.replace(/×/g, '*')
.replace(/÷/g, '/')
.replace(/²/g, '**2')
.replace(/³/g, '**3')
.replace(/√(\d+)/g, 'Math.sqrt($1)')
.replace(/(\d+)!/g, function fact(n) {
return Array.from({length: n}, (_,i) => i+1).reduce((a,b) => a*b, 1);
})
.replace(/(sin|cos|tan|log|ln)\(/g, 'Math.$1(')
.replace(/\^/g, '**');
// 补全剩余括号
expr += ')'.repeat(openBrackets);
openBrackets = 0;
const result = eval(expr);
display.textContent = Number.isInteger(result) ? result : result.toFixed(6);
document.getElementById('errorMsg').textContent = '';
} catch (error) {
document.getElementById('errorMsg').textContent = 'Expression Error';
setTimeout(() => {
document.getElementById('errorMsg').textContent = '';
}, 2000);
}
}
function clearDisplay() {
display.textContent = '0';
openBrackets = 0;
}
function backspace() {
const lastChar = display.textContent.slice(-1);
if (lastChar === '(') openBrackets--;
if (lastChar === ')') openBrackets++;
display.textContent = display.textContent.slice(0, -1) || '0';
}
</script>
</body>
</html>
index.html