一、計算器總體描述
????????創建一個在線計算器來實現基礎數學運算功能,通過單一頁面集成數字按鈕、運算符按鈕和顯示結果區域,界面采用簡潔直觀的布局設計,按鈕排列合理且提供即時運算反饋,確保計算邏輯準確和良好的按鍵響應體驗,整體頁面風格高端大氣,視覺效果精致專業。
????????創建一個高端大氣的計算器頁面,使用HTML + Tailwind CSS + DaisyUI實現。這個計算器將包含以下功能:
- 數字按鈕0-9
- 基本運算符(加減乘除)
- 清除和等于功能
- 實時顯示計算結果
- 響應式設計,適配不同設備
二、代碼實現
<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>高級計算器</title><script src="https://cdn.tailwindcss.com"></script><link href="https://cdn.jsdelivr.net/npm/daisyui@3.9.4/dist/full.css" rel="stylesheet" type="text/css" /><style>.btn-calc {transition: all 0.2s ease;}.btn-calc:active {transform: scale(0.95);}</style>
</head>
<body class="min-h-screen bg-base-200 flex items-center justify-center p-4"><div class="card w-full max-w-md bg-base-100 shadow-xl"><div class="card-body"><h2 class="card-title text-2xl font-bold mb-4">高級計算器</h2><!-- 顯示屏 --><div class="bg-base-300 rounded-lg p-4 mb-6"><div id="display" class="text-right text-3xl font-mono h-12 overflow-x-auto">0</div><div id="operation" class="text-right text-sm text-gray-500 h-5"></div></div><!-- 按鈕區 --><div class="grid grid-cols-4 gap-3"><!-- 第一行 --><button onclick="clearAll()" class="btn-calc btn btn-error col-span-2">AC</button><button onclick="backspace()" class="btn-calc btn btn-secondary">?</button><button onclick="appendOperator('/')" class="btn-calc btn btn-accent">÷</button><!-- 第二行 --><button onclick="appendNumber('7')" class="btn-calc btn">7</button><button onclick="appendNumber('8')" class="btn-calc btn">8</button><button onclick="appendNumber('9')" class="btn-calc btn">9</button><button onclick="appendOperator('*')" class="btn-calc btn btn-accent">×</button><!-- 第三行 --><button onclick="appendNumber('4')" class="btn-calc btn">4</button><button onclick="appendNumber('5')" class="btn-calc btn">5</button><button onclick="appendNumber('6')" class="btn-calc btn">6</button><button onclick="appendOperator('-')" class="btn-calc btn btn-accent">-</button><!-- 第四行 --><button onclick="appendNumber('1')" class="btn-calc btn">1</button><button onclick="appendNumber('2')" class="btn-calc btn">2</button><button onclick="appendNumber('3')" class="btn-calc btn">3</button><button onclick="appendOperator('+')" class="btn-calc btn btn-accent">+</button><!-- 第五行 --><button onclick="appendNumber('0')" class="btn-calc btn col-span-2">0</button><button onclick="appendNumber('.')" class="btn-calc btn">.</button><button onclick="calculate()" class="btn-calc btn btn-primary">=</button></div></div></div><script>let currentInput = '0';let previousInput = '';let operation = null;let resetInput = false;function updateDisplay() {const display = document.getElementById('display');const operationDisplay = document.getElementById('operation');display.textContent = currentInput;operationDisplay.textContent = previousInput + (operation ? ' ' + operation : '');}function appendNumber(number) {if (currentInput === '0' || resetInput) {currentInput = number;resetInput = false;} else {currentInput += number;}updateDisplay();}function appendOperator(op) {if (operation !== null) calculate();previousInput = currentInput;operation = op;resetInput = true;updateDisplay();}function calculate() {let result;const prev = parseFloat(previousInput);const current = parseFloat(currentInput);if (isNaN(prev) || isNaN(current)) return;switch (operation) {case '+':result = prev + current;break;case '-':result = prev - current;break;case '*':result = prev * current;break;case '/':result = prev / current;break;default:return;}currentInput = result.toString();operation = null;previousInput = '';resetInput = true;updateDisplay();}function clearAll() {currentInput = '0';previousInput = '';operation = null;updateDisplay();}function backspace() {if (currentInput.length === 1) {currentInput = '0';} else {currentInput = currentInput.slice(0, -1);}updateDisplay();}</script>
</body>
</html>
三、運行效果
?
計算器頁面已成功創建并運行。包含以下特性:
- 支持加減乘除基本運算
- 實時顯示輸入和計算結果
- 清除(AC)和退格(?)功能
- 小數點輸入支持
- 響應式按鈕動畫效果
- 美觀的DaisyUI主題界面