璁＄畻鍣?/title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; min-height: 100vh; background: linear-gradient(135deg, #4a148c 0%, #1e88e5 50%, #4db6ac 100%); font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } .calculator { background: #2d2d2d; border-radius: 20px; padding: 20px; width: 360px; box-shadow: 0 20px 60px rgba(0,0,0,0.5); } .header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .traffic-lights { display: flex; gap: 8px; } .light { width: 12px; height: 12px; border-radius: 50%; } .red { background: #ff5f57; } .yellow { background: #ffbd2e; } .gray { background: #5a5a5a; } .mode-buttons { display: flex; gap: 10px; } .mode-btn { background: #4a4a4a; border: none; border-radius: 8px; width: 40px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; } .display { text-align: right; margin-bottom: 20px; } .expression { color: #999; font-size: 28px; margin-bottom: 5px; height: 35px; } .result { color: white; font-size: 64px; font-weight: 300; height: 75px; line-height: 75px; } .buttons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } button { border: none; border-radius: 50%; width: 70px; height: 70px; font-size: 28px; cursor: pointer; transition: all 0.2s; } button:active { transform: scale(0.95); } .gray-btn { background: #5a5a5a; color: white; } .gray-btn:hover { background: #6a6a6a; } .orange-btn { background: #ff9f0a; color: white; } .orange-btn:hover { background: #ffb340; } .orange-btn.active { background: white; color: #ff9f0a; } </style> <link rel="stylesheet" href="../scrollbar.css"> </head> <body> <div class="calculator"> <div class="header"> <div class="traffic-lights"> <div class="light red"></div> <div class="light yellow"></div> <div class="light gray"></div> </div> <div class="mode-buttons"> <button class="mode-btn">鈯?/button> <button class="mode-btn">鈯?/button> </div> </div> <div class="display"> <div class="expression" id="expression">42-16</div> <div class="result" id="result">26</div> </div> <div class="buttons"> <button class="gray-btn" onclick="clearEntry()">鈱?/button> <button class="gray-btn" onclick="clearAll()">AC</button> <button class="gray-btn" onclick="percentage()">%</button> <button class="orange-btn" onclick="operator('梅')" id="div">梅</button> <button class="gray-btn" onclick="appendNumber('7')">7</button> <button class="gray-btn" onclick="appendNumber('8')">8</button> <button class="gray-btn" onclick="appendNumber('9')">9</button> <button class="orange-btn" onclick="operator('脳')" id="mul">脳</button> <button class="gray-btn" onclick="appendNumber('4')">4</button> <button class="gray-btn" onclick="appendNumber('5')">5</button> <button class="gray-btn" onclick="appendNumber('6')">6</button> <button class="orange-btn" onclick="operator('-')" id="sub">鈭?/button> <button class="gray-btn" onclick="appendNumber('1')">1</button> <button class="gray-btn" onclick="appendNumber('2')">2</button> <button class="gray-btn" onclick="appendNumber('3')">3</button> <button class="orange-btn" onclick="operator('+')" id="add">+</button> <button class="gray-btn" onclick="toggleSign()">+/-</button> <button class="gray-btn" onclick="appendNumber('0')">0</button> <button class="gray-btn" onclick="appendNumber('.')">.</button> <button class="orange-btn" onclick="calculate()">=</button> </div> </div> <script> let currentValue = '26'; let previousValue = ''; let currentOperator = ''; let expression = '42-16'; let shouldResetDisplay = false; const resultDisplay = document.getElementById('result'); const expressionDisplay = document.getElementById('expression'); function updateDisplay() { resultDisplay.textContent = currentValue; expressionDisplay.textContent = expression || ''; } function appendNumber(num) { if (shouldResetDisplay) { currentValue = num; shouldResetDisplay = false; } else { if (num === '.' && currentValue.includes('.')) return; currentValue = currentValue === '0' ? num : currentValue + num; } updateDisplay(); } function operator(op) { if (currentOperator) { calculate(); } previousValue = currentValue; currentOperator = op; expression = previousValue + op; shouldResetDisplay = true; document.querySelectorAll('.orange-btn').forEach(btn => btn.classList.remove('active')); if (op === '+') document.getElementById('add').classList.add('active'); if (op === '-') document.getElementById('sub').classList.add('active'); if (op === '脳') document.getElementById('mul').classList.add('active'); if (op === '梅') document.getElementById('div').classList.add('active'); updateDisplay(); } function calculate() { if (!currentOperator || !previousValue) return; let result; const prev = parseFloat(previousValue); const current = parseFloat(currentValue); switch(currentOperator) { case '+': result = prev + current; break; case '-': result = prev - current; break; case '脳': result = prev * current; break; case '梅': result = prev / current; break; } expression = previousValue + currentOperator + currentValue; currentValue = String(result); currentOperator = ''; previousValue = ''; shouldResetDisplay = true; document.querySelectorAll('.orange-btn').forEach(btn => btn.classList.remove('active')); updateDisplay(); } function clearAll() { currentValue = '0'; previousValue = ''; currentOperator = ''; expression = ''; shouldResetDisplay = false; document.querySelectorAll('.orange-btn').forEach(btn => btn.classList.remove('active')); updateDisplay(); } function clearEntry() { if (currentValue.length > 1) { currentValue = currentValue.slice(0, -1); } else { currentValue = '0'; } updateDisplay(); } function percentage() { currentValue = String(parseFloat(currentValue) / 100); updateDisplay(); } function toggleSign() { currentValue = String(-parseFloat(currentValue)); updateDisplay(); } updateDisplay(); </script>  <div style="position: fixed; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 9999; font-family: system-ui, -apple-system, sans-serif; font-size: 12px; background: rgba(0, 0, 0, 0.2); padding: 4px 12px; border-radius: 20px; backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; opacity: 0.5; display: flex; align-items: center; gap: 8px;" onmouseover="this.style.opacity='1'; this.style.background='rgba(0, 0, 0, 0.6)'" onmouseout="this.style.opacity='0.5'; this.style.background='rgba(0, 0, 0, 0.2)'"> <a href="../../index.html" style="color: rgba(255, 255, 255, 0.9); text-decoration: none; font-weight: 500; transition: color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255, 255, 255, 0.9)'">TopAI</a> <span style="width: 1px; height: 10px; background: rgba(255, 255, 255, 0.3); display: inline-block;"></span> <a href="../../index.html" style="color: rgba(255, 255, 255, 0.9); text-decoration: none; transition: color 0.2s;" onmouseover="this.style.color='#fff'" onmouseout="this.style.color='rgba(255, 255, 255, 0.9)'">Test Tool: Trae</a> </div> </body> </html>