打造極致計算器:HTML+Tailwind+DaisyUI實戰

一、計算器總體描述

????????創建一個在線計算器來實現基礎數學運算功能,通過單一頁面集成數字按鈕、運算符按鈕和顯示結果區域,界面采用簡潔直觀的布局設計,按鈕排列合理且提供即時運算反饋,確保計算邏輯準確和良好的按鍵響應體驗,整體頁面風格高端大氣,視覺效果精致專業。

????????創建一個高端大氣的計算器頁面,使用HTML + Tailwind CSS + DaisyUI實現。這個計算器將包含以下功能:

  1. 數字按鈕0-9
  2. 基本運算符(加減乘除)
  3. 清除和等于功能
  4. 實時顯示計算結果
  5. 響應式設計,適配不同設備

二、代碼實現

<!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>

三、運行效果

?

計算器頁面已成功創建并運行。包含以下特性:

  1. 支持加減乘除基本運算
  2. 實時顯示輸入和計算結果
  3. 清除(AC)和退格(?)功能
  4. 小數點輸入支持
  5. 響應式按鈕動畫效果
  6. 美觀的DaisyUI主題界面

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/907959.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/907959.shtml
英文地址,請注明出處:http://en.pswp.cn/news/907959.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

基于mediapipe深度學習的虛擬畫板系統python源碼

目錄 1.前言 2.算法運行效果圖預覽 3.算法運行軟件版本 4.部分核心程序 5.算法仿真參數 6.算法理論概述 7.參考文獻 8.算法完整程序工程 1.前言 虛擬畫板系統基于計算機視覺與深度學習技術&#xff0c;通過攝像頭捕獲用戶手部動作&#xff0c;利用 MediaPipe框架實現手…

開源的JT1078轉GB28181服務器

JT1078轉GB28181流程 項目地址&#xff1a; JT1078轉GB28181的流媒體服務器: https://github.com/lkmio/lkm JT1078轉GB28181的信令服務器: https://github.com/lkmio/gb-cms 1. 創建GB28181 UA 調用接口: http://localhost:9000/api/v1/jt/device/add 請求體如下&#xf…

元器件基礎學習筆記——雙極結型晶體管 (BJT)

一、概述 1.1 基本結構 雙極結型晶體管&#xff08;Bipolar Junction Transistor&#xff09;由發射極&#xff08;Emitter&#xff09;、基極&#xff08;Base&#xff09;和集電極&#xff08;Collector&#xff09;三個摻雜程度不同的半導體區域組成&#xff0c;分別對應有…

Python 在金融中的應用- Part 1

早在2018年,我開始對資本市場產生興趣。理解資本市場的基本理論對財富積累至關重要。我開始閱讀所有經典著作,如《聰明的投資者》和《證券分析》。在這一系列文章中,我想與讀者分享在Python編程語言背景下理解金融理論的旅程。在文章的第一大部分,我們將專注于金融模型的線…

css使用scoped之后樣式失效問題

項目中的vue代碼原本用的style標簽來寫css&#xff0c;現在想改成<style langscss scoped>&#xff0c;但是改完之后發現樣式不對&#xff1a; 原來是&#xff1a; 將style改成scoped之后變成了&#xff1a;檢查發現是之前定義的一些變量無法被識別&#xff0c;導致這些樣…

基于 GitLab CI + Inno Setup 實現 Windows 程序自動化打包發布方案

在 Windows 桌面應用開發中&#xff0c;實現自動化構建與打包發布是一項非常實用的工程實踐。本文以我在開發PackTes項目時的為例&#xff0c;介紹如何通過 GitLab CI 配合 Inno Setup、批處理腳本、Qt 構建工具&#xff0c;實現版本化打包并發布到共享目錄的完整流程。 項目地…

能源領域新興技術論壇:EMQ 實時數據引擎構建工業智能中樞

5 月 26 日&#xff0c;由沙特阿美亞洲公司主辦的能源領域新興技術論壇在上海順利舉行。本次論壇聚焦智能工廠、無人機與機器人、可靠性與完整性、先進材料四大技術賽道&#xff0c;吸引了來自全球的能源企業、技術供應商及行業專家。 作為業內知名的 MQ AI 實時數據與智能產…

【計算機網絡】第2章:應用層—DNS

目錄 一、PPT 二、總結 DNS&#xff08;域名系統&#xff09;詳解 &#xff08;一&#xff09;DNS核心概念 &#xff08;二&#xff09;DNS查詢過程&#xff08;重點?&#xff09; &#xff08;三&#xff09;DNS資源記錄&#xff08;RR&#xff09;類型…

PHP HTTP 完全指南

PHP HTTP 完全指南 引言 PHP 作為一種流行的服務器端腳本語言,廣泛應用于各種Web開發項目中。HTTP(超文本傳輸協議)是互聯網上應用最為廣泛的網絡協議之一,用于在Web服務器和客戶端之間傳輸數據。本文將詳細介紹 PHP 在 HTTP 通信中的應用,幫助開發者更好地理解和利用 P…

C++測開,自動化測試,業務(第一段實習)

目錄 &#x1f33c;前言 一&#xff0c;實習經歷怎么寫簡歷 &#x1f339;業務理解 &#x1f382;結構化表達 二&#xff0c;實習 &#x1f982;技術和流程卡點 &#x1f511;實習收獲 / 代碼風格 三&#xff0c;測試理論&#xff0c;用例設計&#xff0c;工具鏈 &…

NodeJS全棧開發面試題講解——P5前端能力(React/Vue + API調用)

? 5.1 如何使用 React/Vue 發起后端請求&#xff1f;用什么庫&#xff1f; 面試官您好&#xff0c;在實際項目中我們通常使用 axios、fetch 或框架提供的封裝庫發起后端請求。 &#x1f527; 常用庫對比&#xff1a; 庫框架適配優點axios通用默認支持攔截器、取消請求、請求體…

【C/C++】cmake實現Release版本禁用調試接口技巧

在 C 中通過 CMake 實現部分接口在 Release 版本不生效&#xff0c;可以通過條件編譯結合 CMake 的構建類型判斷來實現。以下是詳細步驟&#xff1a; 1. 在 CMakeLists.txt 中定義配置相關宏 # 設置構建類型&#xff08;可選&#xff0c;但推薦顯式設置&#xff09; if(NOT C…

Spring Boot中的WebSocket技術實現

WebSocket協議基礎 WebSocket作為現代實時通信的核心技術,通過全雙工TCP通道實現了接近實時的數據傳輸能力。該協議主要包含以下核心特性: 協議特點與通信機制 全雙工通信:與HTTP等傳統協議不同,WebSocket允許客戶端和服務端同時發送和接收數據,消除了請求-響應模式的限…

無法發布到PowerBI?試試拆分它

無法發布到PowerBI&#xff1f;試試拆分它 在進行PowerBI發布時&#xff0c;可能會遇到如下兩種無法發布到PowerBI的情況&#xff1a; 第一種&#xff0c;文件太大&#xff0c;無法發布&#xff0c;如圖&#xff1a; 第二種&#xff1a;遠程主機強迫關閉了一個現有的連接&…

光伏功率預測 | LSTM多變量單步光伏功率預測(Matlab完整源碼和數據)

光伏功率預測 | MATLAB實現基于LSTM長短期記憶神經網絡的光伏功率預測 目錄 光伏功率預測 | MATLAB實現基于LSTM長短期記憶神經網絡的光伏功率預測效果一覽基本介紹程序設計參考資料 效果一覽 基本介紹 光伏功率預測 | LSTM多變量單步光伏功率預測&#xff08;Matlab完整源碼和…

【圖像處理入門】2. Python中OpenCV與Matplotlib的圖像操作指南

一、環境準備 import cv2 import numpy as np import matplotlib.pyplot as plt# 配置中文字體顯示&#xff08;可選&#xff09; plt.rcParams[font.sans-serif] [SimHei] plt.rcParams[axes.unicode_minus] False二、圖像的基本操作 1. 圖像讀取、顯示與保存 使用OpenCV…

數據庫系統概論(十一)SQL 集合查詢 超詳細講解(附帶例題表格對比帶你一步步掌握)

數據庫系統概論&#xff08;十一&#xff09;SQL 集合查詢 超詳細講解&#xff08;附帶例題表格對比帶你一步步掌握&#xff09; 前言一、什么是集合查詢&#xff1f;二、集合操作的三種類型1. 并操作2. 交操作3. 差操作 三、使用集合查詢的前提條件四、常見問題與注意事項五、…

如何設計一個支持線上線下的通用訂單模塊 —— 面向本地生活服務行業的架構思路

一、背景與目標 在本地生活服務行業中&#xff0c;訂單模塊作為連接用戶、商戶、商品、支付、履約的核心組件&#xff0c;支撐著平臺內多樣化的業務形態&#xff0c;例如外賣配送、到店服務、團購核銷、即時零售、預約預訂、線下消費等。 設計一個可支持線上線下融合的通用訂…

Django數據庫連接報錯 django.db.utils.NotSupportedError: MySQL 8 or later is required

可嘗試換django版本 pip install django3.2.13 另外mysql下載地址 https://dev.mysql.com/downloads/installer/ 安裝可以參考&#xff1a; https://blog.csdn.net/HHHQHHHQ/article/details/148125549 重點&#xff1a;用戶變量添加 C:\Program Files\MySQL\MySQL Server …

github 提交失敗,連接不上

1. 第一種情況&#xff0c;開了加速器&#xff0c;導致代理錯誤 刪除hosts文件里相關的github代理地址 2. 有些ip不支持22端口連接,改為443連接 ssh -vT gitgithub.com // 命令執行結果 OpenSSH_for_Windows_9.5p1, LibreSSL 3.8.2 debug1: C…