机器人
积分排行榜
Scratch
积分排行榜
Python
在线答题
积分排行榜
活跃排行榜
打字练习
Microbit
C++
在线答题
积分排行榜
活跃排行榜
网盘
积分
未登录
未登录
登录学习
作者：
高迎午
更新时间：
2025-07-01 21:48
浏览：
7次
点赞：
0次
热度：
20
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Modern Calculator</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet"> <!-- Tailwind Configuration --> <script> tailwind.config = { theme: { extend: { colors: { primary: '#3B82F6', secondary: '#1E40AF', accent: '#60A5FA', neutral: '#1F2937', 'neutral-light': '#F3F4F6', 'neutral-dark': '#111827', }, fontFamily: { inter: ['Inter', 'sans-serif'], }, }, } } </script> <style type="text/tailwindcss"> @layer utilities { .content-auto { content-visibility: auto; } .btn-shadow { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); } .btn-press { transform: translateY(2px); box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1); } .calculator-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 12px; } .display-text { font-size: clamp(2rem, 8vw, 3.5rem); } } </style> </head> <body class="bg-gradient-to-br from-blue-50 to-indigo-100 min-h-screen flex flex-col items-center justify-center p-4 font-inter"> <!-- Calculator Container --> <div class="bg-white rounded-3xl shadow-2xl w-full max-w-md overflow-hidden transition-all duration-300 hover:shadow-blue-200/50"> <!-- Display Section --> <div class="bg-gradient-to-r from-primary to-secondary p-6 text-white"> <div class="flex justify-between items-center mb-4"> <h1 class="text-xl font-bold tracking-tight">Calculator</h1> <div class="flex space-x-2"> <button id="history-toggle" class="p-2 rounded-full hover:bg-white/20 transition-colors"> <i class="fa fa-history"></i> </button> <button id="theme-toggle" class="p-2 rounded-full hover:bg-white/20 transition-colors"> <i class="fa fa-moon-o"></i> </button> </div> </div> <!-- History Panel (Hidden by default) --> <div id="history-panel" class="h-0 overflow-hidden transition-all duration-300"> <div class="bg-white/10 rounded-xl p-3 mb-3"> <h2 class="text-sm font-medium mb-2 text-white/80">History</h2> <div id="history-content" class="text-sm h-24 overflow-y-auto text-white/90"> <!-- History items will be added here --> <p class="text-center text-white/60 italic">No calculations yet</p> </div> </div> </div> <!-- Calculator Display --> <div class="text-right"> <div id="calculation" class="text-white/70 text-lg h-6 mb-1 overflow-x-auto whitespace-nowrap transition-opacity duration-200"></div> <div id="result" class="display-text font-bold tracking-tight h-[60px] overflow-x-auto whitespace-nowrap transition-all duration-200"></div> </div> </div> <!-- Keypad Section --> <div class="p-6"> <div class="calculator-grid"> <!-- Row 1 --> <button class="calc-btn bg-neutral-light text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-neutral-light/80 active:btn-press flex items-center justify-center"> <i class="fa fa-refresh"></i> </button> <button class="calc-btn bg-neutral-light text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-neutral-light/80 active:btn-press"> +/- </button> <button class="calc-btn bg-neutral-light text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-neutral-light/80 active:btn-press"> % </button> <button class="calc-btn bg-accent text-white font-medium py-4 rounded-xl transition-all duration-200 hover:bg-accent/90 active:btn-press"> ÷ </button> <!-- Row 2 --> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press"> 7 </button> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press"> 8 </button> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press"> 9 </button> <button class="calc-btn bg-accent text-white font-medium py-4 rounded-xl transition-all duration-200 hover:bg-accent/90 active:btn-press"> × </button> <!-- Row 3 --> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press"> 4 </button> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press"> 5 </button> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press"> 6 </button> <button class="calc-btn bg-accent text-white font-medium py-4 rounded-xl transition-all duration-200 hover:bg-accent/90 active:btn-press"> - </button> <!-- Row 4 --> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press"> 1 </button> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press"> 2 </button> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press"> 3 </button> <button class="calc-btn bg-accent text-white font-medium py-4 rounded-xl transition-all duration-200 hover:bg-accent/90 active:btn-press"> + </button> <!-- Row 5 --> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press" style="grid-column: span 2;"> 0 </button> <button class="calc-btn bg-white text-neutral font-medium py-4 rounded-xl transition-all duration-200 hover:bg-gray-50 active:btn-press"> . </button> <button class="calc-btn bg-gradient-to-r from-primary to-secondary text-white font-medium py-4 rounded-xl transition-all duration-200 hover:from-primary/90 hover:to-secondary/90 active:btn-press"> = </button> </div> </div> </div> <!-- Footer --> <footer class="mt-8 text-center text-neutral/60 text-sm"> <p>Modern Calculator • Built with HTML, Tailwind CSS & JavaScript</p> </footer> <script> // DOM Elements const calculationDisplay = document.getElementById('calculation'); const resultDisplay = document.getElementById('result'); const calcButtons = document.querySelectorAll('.calc-btn'); const historyToggle = document.getElementById('history-toggle'); const historyPanel = document.getElementById('history-panel'); const historyContent = document.getElementById('history-content'); const themeToggle = document.getElementById('theme-toggle'); // Calculator State let calculation = ''; let result = ''; let memory = 0; let history = []; let isHistoryOpen = false; let isDarkMode = false; // Initialize Calculator updateDisplay(); // Event Listeners calcButtons.forEach(button => { button.addEventListener('click', () => handleButtonClick(button.textContent.trim())); // Add keyboard support const key = button.textContent.trim(); let keyboardKey = ''; switch(key) { case '×': keyboardKey = '*'; break; case '÷': keyboardKey = '/'; break; case '+/-': keyboardKey = '±'; break; default: keyboardKey = key; } button.dataset.key = keyboardKey; }); // Keyboard Input document.addEventListener('keydown', (e) => { const key = e.key; let buttonValue = ''; switch(key) { case '*': buttonValue = '×'; break; case '/': buttonValue = '÷'; break; case 'Enter': buttonValue = '='; break; case 'Escape': buttonValue = 'C'; break; case 'Backspace': buttonValue = '←'; break; case '±': buttonValue = '+/-'; break; default: buttonValue = key; } // Find the button with this value const button = Array.from(calcButtons).find(btn => btn.dataset.key === buttonValue || btn.textContent.trim() === buttonValue ); if (button) { // Simulate button press button.classList.add('btn-press'); setTimeout(() => button.classList.remove('btn-press'), 150); // Handle the click handleButtonClick(buttonValue); } }); // History Toggle historyToggle.addEventListener('click', () => { isHistoryOpen = !isHistoryOpen; historyPanel.style.height = isHistoryOpen ? '140px' : '0'; updateHistoryDisplay(); }); // Theme Toggle themeToggle.addEventListener('click', () => { isDarkMode = !isDarkMode; document.body.classList.toggle('bg-gradient-to-br', !isDarkMode); document.body.classList.toggle('from-blue-50', !isDarkMode); document.body.classList.toggle('to-indigo-100', !isDarkMode); document.body.classList.toggle('bg-neutral-dark', isDarkMode); const calculator = document.querySelector('.bg-white'); calculator.classList.toggle('bg-white', !isDarkMode); calculator.classList.toggle('bg-neutral', isDarkMode); const displayBg = document.querySelector('.bg-gradient-to-r'); displayBg.classList.toggle('from-primary', !isDarkMode); displayBg.classList.toggle('to-secondary', !isDarkMode); displayBg.classList.toggle('from-neutral-dark', isDarkMode); displayBg.classList.toggle('to-neutral', isDarkMode); // Update button colors document.querySelectorAll('.bg-white').forEach(el => { el.classList.toggle('bg-white', !isDarkMode); el.classList.toggle('bg-neutral-dark', isDarkMode); el.classList.toggle('text-neutral', !isDarkMode); el.classList.toggle('text-white', isDarkMode); }); document.querySelectorAll('.bg-neutral-light').forEach(el => { el.classList.toggle('bg-neutral-light', !isDarkMode); el.classList.toggle('bg-neutral-dark', isDarkMode); el.classList.toggle('text-neutral', !isDarkMode); el.classList.toggle('text-white', isDarkMode); }); // Update theme icon themeToggle.innerHTML = isDarkMode ? '<i class="fa fa-sun-o"></i>' : '<i class="fa fa-moon-o"></i>'; }); // Handle Button Clicks function handleButtonClick(value) { // Clear calculator if (value === 'C' || value === 'AC') { calculation = ''; result = ''; } // Delete last character else if (value === '←') { calculation = calculation.slice(0, -1); } // Percentage else if (value === '%') { if (calculation) { try { const tempResult = eval(calculation) / 100; calculation = tempResult.toString(); } catch (error) { calculation = 'Error'; } } } // Plus/Minus else if (value === '+/-') { if (calculation) { try { const tempResult = eval(calculation) * -1; calculation = tempResult.toString(); } catch (error) { calculation = 'Error'; } } } // Equals else if (value === '=') { if (calculation) { try { result = eval(calculation); // Add to history history.unshift(`${calculation} = ${result}`); if (history.length > 5) { history.pop(); } calculation = result.toString(); } catch (error) { result = 'Error'; } } } // Operator else if (['+', '-', '×', '÷'].includes(value)) { const operators = ['+', '-', '*', '/']; const lastChar = calculation.slice(-1); // Replace operator if the last character is already an operator if (operators.includes(lastChar)) { calculation = calculation.slice(0, -1) + (value === '×' ? '*' : value === '÷' ? '/' : value); } else { calculation += value === '×' ? '*' : value === '÷' ? '/' : value; } } // Decimal point else if (value === '.') { // Check if the last number already has a decimal point const lastNumber = calculation.match(/[0-9.]+$/); if (!lastNumber || !lastNumber[0].includes('.')) { calculation += value; } } // Numbers else { calculation += value; } updateDisplay(); } // Update Display function updateDisplay() { // Format calculation for display (replace * with × and / with ÷) const formattedCalculation = calculation .replace(/\*/g, '×') .replace(/\//g, '÷'); calculationDisplay.textContent = formattedCalculation; // Format result with commas for thousands if (result && result !== 'Error') { const numResult = parseFloat(result); resultDisplay.textContent = numResult.toLocaleString('en-US'); } else if (calculation) { // Try to evaluate the calculation to show the current result try { const currentResult = eval(calculation); resultDisplay.textContent = currentResult.toLocaleString('en-US'); } catch (error) { resultDisplay.textContent = formattedCalculation || '0'; } } else { resultDisplay.textContent = '0'; } } // Update History Display function updateHistoryDisplay() { if (history.length === 0) { historyContent.innerHTML = '<p class="text-center text-white/60 italic">No calculations yet</p>'; return; } historyContent.innerHTML = ''; history.forEach(item => { const historyItem = document.createElement('div'); historyItem.className = 'mb-1 p-1 rounded bg-white/5 hover:bg-white/10 transition-colors cursor-pointer'; historyItem.textContent = item; // Click on history item to load it historyItem.addEventListener('click', () => { const calc = item.split(' = ')[0]; calculation = calc .replace(/×/g, '*') .replace(/÷/g, '/'); result = ''; updateDisplay(); isHistoryOpen = false; historyPanel.style.height = '0'; }); historyContent.appendChild(historyItem); }); } </script> </body> </html
点赞成功
分享作品
×