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

代码的余温

于 2025-06-02 00:38:45 发布

阅读量421

点赞数 14

文章标签： html css javascript

本文链接：https://blog.csdn.net/HTTP404_CN/article/details/148372572

版权

一、计算器总体描述

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

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