当前位置： 首页 > news >正文

HTML+CSS+JS实现计算器

news 2026/3/28 7:19:49

🙈作者简介：练习时长两年半的Java up主
🙉个人主页：程序员老茶
🙊 ps:点赞👍是免费的，却可以让写博客的作者开心好久好久😎
📚系列专栏：Java全栈，计算机系列（火速更新中）
💭 格言：种一棵树最好的时间是十年前，其次是现在
🏡动动小手，点个关注不迷路，感谢宝子们一键三连

目录

  • 课程名：HTML+CSS+JS
    • 内容/作用：知识点/设计/实验/作业/练习
    • 学习：HTML+CSS+JS
    • 思路
    • 效果图
    • 代码

课程名：HTML+CSS+JS

内容/作用：知识点/设计/实验/作业/练习

学习：HTML+CSS+JS

思路

  1. 创建HTML页面，包含数字和操作符的按钮以及一个输出框
  2. 使用CSS样式美化页面
  3. 使用JavaScript编写计算器的逻辑，通过绑定事件处理程序，实现对按钮的响应和输出结果到输出框

效果图

在这里插入图片描述

代码

HTML:

<!DOCTYPE html>
<html>
<head><meta charset="UTF-8"><title>Calculator</title><link rel="stylesheet" href="style.css">
</head>
<body><div class="calculator"><div class="output"><input type="text" id="result" disabled></div><div class="btn-row"><button class="operator" id="clear">C</button><button class="operator" id="backspace">CE</button><button class="operator" id="divide">/</button><button class="operator" id="multiply">*</button></div><div class="btn-row"><button class="number" id="7">7</button><button class="number" id="8">8</button><button class="number" id="9">9</button><button class="operator" id="minus">-</button></div><div class="btn-row"><button class="number" id="4">4</button><button class="number" id="5">5</button><button class="number" id="6">6</button><button class="operator" id="plus">+</button></div><div class="btn-row"><button class="number" id="1">1</button><button class="number" id="2">2</button><button class="number" id="3">3</button><button class="operator" id="equals">=</button></div><div class="btn-row"><button class="number" id="0">0</button><button class="operator" id="decimal">.</button></div></div><script src="app.js"></script>
</body>
</html>

CSS:

* {margin: 0;padding: 0;box-sizing: border-box;font-family: Arial, sans-serif;
}.calculator {margin: 50px auto;width: 300px;background-color: #eee;border-radius: 10px;padding: 20px;box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
}.output {margin-bottom: 20px;
}#result {width: 100%;font-size: 2em;text-align: right;padding: 5px;background-color: #fff;border: none;border-radius: 5px;box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
}.btn-row {display: flex;justify-content: space-between;margin-bottom: 5px;
}button {background-color: #fff;color: #333;font-size: 1.5em;border: none;border-radius: 5px;padding: 10px;width: 70px;height: 70px;box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);cursor: pointer;transition: all 0.3s ease;
}button:hover {background-color: #333;color: #fff;box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}.number {background-color: #eee;
}.operator {background-color: #f2a53f;color: #fff;
}.btn-row:last-child button {width: 150px;
}.btn-row:last-child button#decimal {width: 70px;
}.btn-row:last-child button#0 {width: 150px;
}

JavaScript:

//获取DOM元素
const result = document.getElementById("result");
const clearBtn = document.getElementById("clear");
const backspaceBtn = document.getElementById("backspace");
const divideBtn = document.getElementById("divide");
const multiplyBtn = document.getElementById("multiply");
const minusBtn = document.getElementById("minus");
const plusBtn = document.getElementById("plus");
const equalsBtn = document.getElementById("equals");
const decimalBtn = document.getElementById("decimal");
const numberBtns = document.querySelectorAll(".number");let currentOperation = null;
let firstOperand = null;//添加事件监听器
clearBtn.addEventListener("click", () => {resetCalculator();
});backspaceBtn.addEventListener("click", () => {result.value = result.value.slice(0, -1);
});divideBtn.addEventListener("click", () => {setOperation("/");
});multiplyBtn.addEventListener("click", () => {setOperation("*");
});minusBtn.addEventListener("click", () => {setOperation("-");
});plusBtn.addEventListener("click", () => {setOperation("+");
});equalsBtn.addEventListener("click", () => {if (currentOperation !== null) {compute();currentOperation = null;}
});decimalBtn.addEventListener("click", () => {if (!result.value.includes(".")) {result.value += ".";}
});numberBtns.forEach((button) => {button.addEventListener("click", () => {if (result.value === "0") {result.value = button.innerText;} else {result.value += button.innerText;}});
});//重置计算器
function resetCalculator() {currentOperation = null;firstOperand = null;result.value = "0";
}//设置操作符
function setOperation(operator) {if (currentOperation !== null) {compute();}currentOperation = operator;firstOperand = parseFloat(result.value);result.value = "0";
}//计算结果
function compute() {const secondOperand = parseFloat(result.value);let resultValue;switch (currentOperation) {case "+":resultValue = firstOperand + secondOperand;break;case "-":resultValue = firstOperand - secondOperand;break;case "*":resultValue = firstOperand * secondOperand;break;case "/":resultValue = firstOperand / secondOperand;break;default:return;}result.value = resultValue;firstOperand = resultValue;
}

这是一个基础的计算器，可以进行加、减、乘、除运算，并且支持小数点。如果需要增加新的功能，比如开方、取反、取余等，只需在HTML中添加相应的按钮，并在JavaScript中添加相应的事件监听器和函数即可。

往期专栏
Java全栈开发
数据结构与算法
计算机组成原理
操作系统
数据库系统
物联网控制原理与技术

相关文章：

HTML+CSS+JS实现计算器

&#x1f648;作者简介&#xff1a;练习时长两年半的Java up主 &#x1f649;个人主页&#xff1a;程序员老茶 &#x1f64a; ps:点赞&#x1f44d;是免费的&#xff0c;却可以让写博客的作者开心好久好久&#x1f60e; &#x1f4da;系列专栏&#xff1a;Java全栈&#xff0c;…...

编程日记 2023/11/1 4:50:42

Git工作原理和常见问题处理方案

博客定位Git工作区域工作区域划分暂存区设计目的 Git基本操作核心操作初始化和配置指令 HEAD指针Git版本回滚指令介绍reset模式reset hard使用场景reset soft使用场景reset mixed使用场景reset使用注意事项checkout使用场景 Git分支管理什么是分支分支应用场景分支相关指令被合…...

编程日记 2023/11/1 4:49:41

C++-实现一个简单的菜单程序

C-实现一个简单的菜单程序 1&#xff0c;if-else语句实现1.1&#xff0c;代码实现1.2&#xff0c;功能检测 2&#xff0c;switch语句实现2.1&#xff0c;代码实现2.2&#xff0c;功能检测 1&#xff0c;if-else语句实现 实现一个简单的菜单程序&#xff0c;运行时显示"Men…...

编程日记 2023/11/1 4:48:40

Git更新 fork 的仓库

文章目录 确保本地仓库是最新的配置上游存储库(remote upstream)获取上游存储库的更改合并上游存储库的更改推送更改到你 fork 的仓库 确保本地仓库是最新的 在命令行中&#xff0c;导航到存储库的本地副本所在的目录&#xff0c;并执行以下命令&#xff1a; # 切换到主分支 …...

编程日记 2023/11/1 4:47:39

chorme安装esay scholar及chrome 无法从该网站添加应用、扩展程序和用户脚本解决方案

问题描述 如题&#xff0c;博主想安装easy scholar用于查询论文的分区&#xff0c;结果安装了半天一直出现chrome 无法从该网站添加应用、扩展程序和用户脚本解决方案的问题。 解决方案 先从这个网址下载&#xff1a;https://www.easyscholar.cc/download 然后对下载好的文…...

编程日记 2023/11/1 4:45:36

数据库-扩展语句，约束方式

扩展语句&#xff1a; 例&#xff1a; 自增长&#xff1a; auto_increment:表示该字段可以自增长&#xff0c;默认从一开始&#xff0c;每条记录会自动递增1 复制&#xff1a; 通过like这个语法直接复制ky32的表结构&#xff0c;只能复制表结构&#xff0c;不能复制表里面的…...

编程日记 2023/11/1 4:44:35

精密数据工匠：探索 Netty ChannelHandler 的奥秘

通过上篇文章&#xff08;Netty入门 — Channel&#xff0c;把握 Netty 通信的命门&#xff09;&#xff0c;我们知道 Channel 是传输数据的通道&#xff0c;但是有了数据&#xff0c;也有数据通道&#xff0c;没有数据加工也是没有意义的&#xff0c;所以今天学习 Netty 的第四…...

编程日记 2023/11/1 4:43:34

Python四种基本结构的操作

列表 列表的创建有两种方法 SampleList [] SampleList list() 列表中元素的添加 append(obj)&#xff1a;在列表末尾添加元素obj extend(seq)&#xff1a;在列表末尾添加多个值&#xff0c;使用extend()函数&#xff0c;seq是一个可迭代对象&#xff0c;否则报错。 Inser…...

编程日记 2023/11/1 4:42:34

Eureka：com.netflix.discovery.TimedSupervisorTask - task supervisor timed out

1、原因是spring cloud netflix中&#xff0c;某个服务挂掉了或者是执行某个任务时间过长&#xff0c;而没有发送给Eureka心跳 &#xff0c;导致调用不到指定的服务&#xff0c;所以检查被调用服务器是否有问题。 2、有可能是某一个微服务自身内部G了&#xff0c;导致没有向eu…...

编程日记 2023/11/1 4:41:33

1.spark standalone环境安装

概述 环境是spark 3.2.4 hadoop版本 3.2.4&#xff0c;所以官网下载的包为 spark-3.2.4-bin-hadoop3.2.tgz 在具体安装部署之前&#xff0c;需要先下载Spark的安装包&#xff0c;进到 spark的官网&#xff0c;点击download按钮 使用Spark的时候一般都是需要和Hadoop交互的&a…...

编程日记 2023/11/1 4:40:32

【问题解决】 avue dicUrl 动态参数加载字典数据（已解决）

事情是这样的&#xff0c;用了avue-crud组件&#xff0c;配置了一个option。     现在有一列source属性要展示为 多选的下拉框 &#xff0c;当然问题不在这而在于&#xff0c;选项是需要根据同级别属性id去拿的。也就是option.column.source 的配置中 需要该行的option.col…...

编程日记 2023/11/1 4:39:30

​学习一下，什么是预包装食品？​

预包装食品&#xff0c;指预先定量包装或者制作在包装材料和容器中的食品&#xff1b;包括预先定量包装以及预先定量制作在包装材质和容器中并且在一定量限范围内具有统一的质量或体积标识的食品。简单说&#xff0c; 就是指在包装完成后即具有确定的量值&#xff0c;这一确定的…...

编程日记 2023/11/1 4:38:29

从零开始学习搭建量化平台笔记

从零开始学习搭建量化平台笔记 本笔记由纯新手小白开发学习记录&#xff0c;欢迎大佬请教指点留言&#xff0c;有空的话还可以认识一下&#xff0c;来上海请您喝咖啡~~ 2023/10/30&#xff1a;上份工作辞职并休息了几个月后&#xff0c;打算开始找个关于量化投资相关的工作。面…...

编程日记 2023/11/1 4:37:25

【whisper】在python中调用whisper提取字幕或翻译字幕到文本

最近在做视频处理相关的业务。其中有需要将视频提取字幕的需求&#xff0c;在我们实现过程中分为两步&#xff1a;先将音频分离&#xff0c;然后就用到了whisper来进行语音识别或者翻译。本文将详细介绍一下whisper的基本使用以及在python中调用whisper的两种方式。 一、whispe…...

编程日记 2023/11/1 4:36:24

git diff对比差异时指定或排除特定的文件和目录

文章目录 前言git diff指定或者排除文件指定文件和目录排除文件和目录 番外篇总结 前言 你一般什么时候会用GPT? 居然会有这种话题&#xff0c;答案就是作为程序员的我天天在用&#xff0c;虽然GPT有个胡说八道的毛病&#xff0c;但试试总没错的&#xff0c;就比如今天题目中这…...

编程日记 2023/11/1 4:34:22

数据结构介绍与时间、空间复杂度

数据结构介绍 什么是数据结构&#xff1f;什么是算法&#xff1f;数据结构和算法的重要性 数据结构定义 数据结构是计算机科学中研究数据组织、存储和管理的一门学科。数据结构描述了数据对象之间的关系&#xff0c;以及对数据对象进行操作的方法和规则。 常见的数据结构 数…...

编程日记 2023/11/1 4:32:20

(c语言进阶)字符串函数、字符分类函数和字符转换函数

一.求字符串长度 1.strlen() (1)基本概念 头文件&#xff1a;<string.h> (2)易错点&#xff1a;strlen()的返回值为无符号整形 #include<stdio.h> #include<string.h> int main() {const char* str1 "abcdef";const char* str2 "bbb&q…...

编程日记 2023/11/1 4:31:19

解决MySQL大版本升级导致.Net(C#)程序连接报错问题

数据库版本从MySQL 5.7.21 升级到 MySQL8.0.21 数据升级完成后&#xff0c;直接修改程序的数据库连接配置信息 <connectionStrings> <add name"myConnectionString" connectionString"server192.168.31.200;uidapp;pwdFgTDkn0q!75;databasemail;&q…...

编程日记 2023/11/1 4:30:18

Java 将对象List转为csv文件并上传远程文件服务器实现方案

问题情景&#xff1a; 最近项目中遇到了根据第三方系统传递过来的参数&#xff0c;封装为List<实体类对象>后&#xff0c;将该实体类转换为csv文件&#xff0c;然后上传到远程的sftp服务器指定目录的需求。 实现思路&#xff1a; List<实体类对象>转为csv文件的…...

编程日记 2023/11/1 4:29:17

分享8个分布式Kafka的使用场景

Kafka 最初是为海量日志处理而构建的。它保留消息直到过期&#xff0c;并让消费者按照自己的节奏提取消息。与它的前辈不同&#xff0c;Kafka 不仅仅是一个消息队列&#xff0c;它还是一个适用于各种情况的开源事件流平台。 1. 日志处理与分析 下图显示了典型的 ELK&#xff0…...

编程日记 2023/11/1 4:27:15

WordPress建站避坑指南：Ubuntu服务器常见权限问题与安全配置

WordPress建站避坑指南&#xff1a;Ubuntu服务器常见权限问题与安全配置 引言&#xff1a;为什么你的WordPress网站总出问题&#xff1f; 每次看到新手开发者兴奋地宣布"我的WordPress网站上线了"&#xff0c;我都忍不住想问&#xff1a;你真的检查过文件权限了吗&am…...

编程新知 2026/3/28 6:02:28

nanobot实操手册：Qwen3-4B模型温度（temperature）、top_p、max_tokens参数详解

nanobot实操手册&#xff1a;Qwen3-4B模型温度&#xff08;temperature&#xff09;、top_p、max_tokens参数详解 1. nanobot简介与快速上手 nanobot是一款超轻量级的个人人工智能助手&#xff0c;灵感来源于OpenClaw项目。它最大的特点是代码量极小&#xff0c;仅需约4000行…...

编程新知 2026/3/28 4:56:13

华硕笔记本终极电池拯救指南：用G-Helper实现智能充电与健康修复

华硕笔记本终极电池拯救指南&#xff1a;用G-Helper实现智能充电与健康修复 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other models …...

编程新知 2026/3/28 3:35:31

极客专属：OpenClaw+百川2-13B打造个人CLI智能助手

极客专属&#xff1a;OpenClaw百川2-13B打造个人CLI智能助手 1. 为什么开发者需要命令行智能助手 作为一个长期与终端打交道的开发者&#xff0c;我每天要重复执行大量机械操作&#xff1a;查看日志、运行测试、整理结果。这些工作虽然简单&#xff0c;却极其消耗精力。直到我…...

编程新知 2026/3/28 3:03:12

2026考公全攻略：在校生如何选岗、如何备考、如何上岸一次讲清

很多在校生最近都在问&#xff1a;现在开始准备公务员考试&#xff0c;还来得及吗先说结论&#xff1a;来得及&#xff0c;但前提是你要走对路径这几年考公环境已经发生明显变化报考人数持续增加岗位信息越来越透明单纯刷题已经不再有效考公正在从拼努力&#xff0c;变成拼策略…...

编程新知 2026/3/28 2:43:06

OpenClaw怎么集成？OpenClaw移动云小白6分钟搭建及使用指南【最新！】

OpenClaw怎么集成&#xff1f;OpenClaw移动云小白6分钟搭建及使用指南【最新&#xff01;】。OpenClaw怎么部署&#xff1f;本文面向零基础用户&#xff0c;完整说明在轻量服务器与本地Windows11、macOS、Linux系统中部署OpenClaw&#xff08;Clawdbot&#xff09;的流程&#…...

编程新知 2026/3/28 0:25:26

量子行走：从理论到Python实现——4. 量子算法设计与实现

目录 4. 量子算法设计与实现 4.1 基础量子算法 4.1.1 Deutsch-Jozsa算法 4.1.2 量子傅里叶变换 4.1.3 Grover搜索算法 4.2 Shor因数分解与离散对数 4.2.1 算法框架与经典预处理 4.2.2 量子相位估计的精度分析 4.3 变分量子算法 4.3.1 变分量子本征求解器 4.3.2 量子近…...

编程新知 2026/3/27 23:54:56

别再只盯着KNN了：聊聊Wi-Fi指纹定位中那些被低估的匹配算法与实战选择

超越KNN&#xff1a;Wi-Fi指纹定位中的高阶匹配算法与工程化选型指南 商场里找不到心仪店铺的焦虑、仓库中耗时的手动货品盘点、医院里紧急设备定位的延迟——这些场景背后都指向同一个技术痛点&#xff1a;室内定位精度不足。当大多数开发者习惯性采用KNN算法时&#xff0c;我…...

编程新知 2026/3/27 23:12:37

造相-Z-Image-Turbo亚洲美女LoRA创作实战：三个案例教你玩转AI绘画

造相-Z-Image-Turbo亚洲美女LoRA创作实战&#xff1a;三个案例教你玩转AI绘画 1. 认识造相-Z-Image-Turbo与亚洲美女LoRA 造相-Z-Image-Turbo是一款强大的AI图片生成模型&#xff0c;而亚洲美女LoRA则是专门针对亚洲人物特征优化的风格适配器。这个组合让普通用户也能轻松创作…...

编程新知 2026/3/27 19:49:03

macOS 环境下的 Fugu14 越狱实战：从环境配置到 Unc0ver 完美激活

1. 准备工作&#xff1a;搭建macOS越狱环境 在开始Fugu14越狱之前&#xff0c;我们需要确保macOS环境配置完善。我实测发现&#xff0c;很多新手卡在第一步环境搭建&#xff0c;其实只要按顺序完成这些准备&#xff0c;后面流程会顺利很多。 首先需要安装Python 3.8或更高版本…...

编程新知 2026/3/27 18:24:15