打造极致计算器：HTML+Tailwind+DaisyUI实战-海口c网

打造极致计算器：HTML+Tailwind+DaisyUI实战

article/2025/7/15 7:33:01

一、计算器总体描述

创建一个在线计算器来实现基础数学运算功能，通过单一页面集成数字按钮、运算符按钮和显示结果区域，界面采用简洁直观的布局设计，按钮排列合理且提供即时运算反馈，确保计算逻辑准确和良好的按键响应体验，整体页面风格高端大气，视觉效果精致专业。

创建一个高端大气的计算器页面，使用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>