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

风尚云网前端学习:制作一款简易的在线计算器

风尚云网前端学习:制作一款简易的在线计算器

简介

在前端开发的学习过程中,实现一个简单的在线计算器是一个常见的练习项目。它不仅能够帮助我们熟悉HTML、CSS和JavaScript的基本用法,还能够加深我们对事件处理和DOM操作的理解。今天,我们将一起学习如何创建一款简易的在线计算器,并探索其背后的代码实现。在这里插入图片描述

项目结构

我们的计算器项目包含三个主要部分:HTML结构、CSS样式和JavaScript逻辑。

HTML结构

HTML部分负责构建计算器的界面。我们使用<div>元素来创建计算器的容器,<input>元素作为显示屏,以及一系列<button>元素作为数字和运算符的按钮。

<div class="calculator"><p>风尚云网前端学习:<br>一款简易的在线计算器</p><input type="text" id="display" class="display" readonly><div class="button-grid"><!-- 按钮 --></div>
</div>

CSS样式

CSS部分负责计算器的样式设计。我们使用了Flexbox布局来居中显示计算器,并为按钮和显示屏添加了一些基本的样式,使其看起来更加美观。

body {font-family: 'Arial', sans-serif;background-color: #ececec;display: flex;justify-content: center;align-items: center;height: 100vh;margin: 0;
}.calculator {background-color: #ffffff;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);overflow: hidden;width: 240px;max-width: 100%;padding: 20px;
}.display {background-color: #f7f7f7;color: #333;font-size: 1.2em;padding: 15px;text-align: right;border: none;outline: none;width: 100%;box-sizing: border-box;margin-bottom: 15px;
}.button-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;
}.button {background-color: #e0e0e0;border: none;border-radius: 5px;color: #333;cursor: pointer;font-size: 1em;padding: 15px;text-align: center;transition: background-color 0.3s ease;
}/* 更多样式... */

JavaScript逻辑

JavaScript部分负责计算器的逻辑处理。我们为每个按钮添加了事件监听器,以便在点击时执行相应的操作。这包括数字输入、运算符选择、计算结果和清除操作。

const display = document.getElementById('display');
let currentInput = '';
let previousInput = '';
let operation = null;const buttons = document.querySelectorAll('.button');
buttons.forEach(button => {button.addEventListener('click', () => {const value = button.textContent;if (value === 'C') {currentInput = '';previousInput = '';operation = null;display.value = '';} else if (value === '=') {if (previousInput !== '' && operation !== null && currentInput !== '') {calculateResult();}} else if (['+', '-', '×', '÷'].includes(value)) {if (currentInput !== '') {if (operation) {calculateResult();}previousInput = parseFloat(currentInput);currentInput = '';operation = value;}} else if (value === '.') {if (!currentInput.includes('.')) {currentInput += value;}} else {currentInput += value;}display.value = currentInput || previousInput || '';});
});function calculateResult() {let result;const num1 = parseFloat(previousInput);const num2 = parseFloat(currentInput);switch (operation) {case '+':result = num1 + num2;break;case '-':result = num1 - num2;break;case '×':result = num1 * num2;break;case '÷':if (num2 === 0) {alert('除数不能为0');return;}result = num1 / num2;break;}display.value = result;currentInput = result.toString();previousInput = '';operation = null;
}

完整代码

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"> <!-- 设置字符编码为UTF-8 --><meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 使页面在移动设备上正常显示 --><title>基本计算器</title> <!-- 页面标题 --><style>/* CSS样式开始 */body {font-family: 'Arial', sans-serif; /* 设置字体 */background-color: #ececec; /* 设置背景颜色 */display: flex; /* 使用Flexbox布局 */justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */height: 100vh; /* 高度设置为视口高度 */margin: 0; /* 移除默认边距 */}.calculator {background-color: #ffffff; /* 计算器背景颜色 */border-radius: 10px; /* 边框圆角 */box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */overflow: hidden; /* 隐藏溢出内容 */width: 240px; /* 计算器宽度 */max-width: 100%; /* 最大宽度为100% */padding: 20px; /* 内边距 */}.display {background-color: #f7f7f7; /* 显示屏背景颜色 */color: #333; /* 文字颜色 */font-size: 1.2em; /* 字体大小 */padding: 15px; /* 内边距 */text-align: right; /* 文本右对齐 */border: none; /* 无边框 */outline: none; /* 无轮廓 */width: 100%; /* 宽度100% */box-sizing: border-box; /* 盒模型 */margin-bottom: 15px; /* 外边距 */}.button-grid {display: grid; /* 使用网格布局 */grid-template-columns: repeat(4, 1fr); /* 四列 */gap: 10px; /* 间隔 */}.button {background-color: #e0e0e0; /* 按钮背景颜色 */border: none; /* 无边框 */border-radius: 5px; /* 边框圆角 */color: #333; /* 文字颜色 */cursor: pointer; /* 鼠标指针 */font-size: 1em; /* 字体大小 */padding: 15px; /* 内边距 */text-align: center; /* 文本居中 */transition: background-color 0.3s ease; /* 背景色渐变 */}.button:hover {background-color: #d5d5d5; /* 鼠标悬停背景颜色 */}.button:active {background-color: #cccccc; /* 鼠标按下背景颜色 */}.operator {background-color: #000; /* 操作符按钮背景颜色 */color: #fff; /* 文字颜色 */}.operator:hover {background-color: #f57c00; /* 鼠标悬停背景颜色 */}.operator:active {background-color: #ef6c00; /* 鼠标按下背景颜色 */}.equals {background-color: #000; /* 等号按钮背景颜色 */color: #fff; /* 文字颜色 */}.equals:hover {background-color: #45a049; /* 鼠标悬停背景颜色 */}.equals:active {background-color: #3e8e41; /* 鼠标按下背景颜色 */}/* CSS样式结束 */</style>
</head>
<body>
<div class="calculator"><!-- 标题和副标题 --><p>风尚云网前端学习:<br>一款简易的在线计算器</p><!-- 显示屏 --><input type="text" id="display" class="display" readonly><!-- 按钮网格 --><div class="button-grid"><!-- 清除按钮 --><button class="button clear">C</button><!-- 数字按钮 --><button class="button number">1</button><button class="button number">2</button><button class="button number">3</button><button class="button number">4</button><button class="button number">5</button><button class="button number">6</button><button class="button number">7</button><button class="button number">8</button><button class="button number">9</button><button class="button number">0</button><!-- 小数点按钮 --><button class="button decimal">.</button><!-- 操作符按钮 --><button class="button operator">+</button><button class="button operator">-</button><button class="button operator">×</button><button class="button operator">÷</button><!-- 等号按钮 --><button class="button equals">=</button></div>
</div><script>// 获取显示屏元素const display = document.getElementById('display');// 用于存储当前输入的数字let currentInput = '';// 用于存储之前的数字let previousInput = '';// 用于存储操作符let operation = null;// 获取所有按钮const buttons = document.querySelectorAll('.button');// 为每个按钮添加点击事件buttons.forEach(button => {button.addEventListener('click', () => {const value = button.textContent;// 处理清除按钮if (value === 'C') {currentInput = '';previousInput = '';operation = null;display.value = '';} else if (value === '=') {// 处理等号按钮,计算结果if (previousInput !== '' && operation !== null && currentInput !== '') {calculateResult();}} else if (['+', '-', '×', '÷'].includes(value)) {// 处理操作符按钮if (currentInput !== '') {if (operation) {calculateResult();}previousInput = parseFloat(currentInput);currentInput = '';operation = value;}} else if (value === '.') {// 处理小数点按钮if (!currentInput.includes('.')) {currentInput += value;}} else {// 处理数字按钮currentInput += value;}// 更新显示屏display.value = currentInput || previousInput || '';});});// 计算结果的函数function calculateResult() {let result;const num1 = parseFloat(previousInput);const num2 = parseFloat(currentInput);// 根据操作符计算结果switch (operation) {case '+':result = num1 + num2;break;case '-':result = num1 - num2;break;case '×':result = num1 * num2;break;case '÷':if (num2 === 0) {alert('除数不能为0');return;}result = num1 / num2;break;}// 显示结果display.value = result;// 重置输入currentInput = result.toString();previousInput = '';operation = null;}
</script></body>
</html>

结论

通过本教程,我们学习了如何创建一个简易的在线计算器。这个项目不仅锻炼了我们的前端技能,还帮助我们理解了事件驱动编程的基本概念。希望这个教程能够帮助你更好地理解HTML、CSS和JavaScript的实际应用,并激发你创建自己的网页项目。


注意:在实际部署时,请确保所有的资源文件(如CSS和JavaScript)都已正确链接,以便计算器能够正常工作。如果你在实现过程中遇到任何问题,欢迎在评论区提问或寻求帮助。

我是风尚,梦想是带十万人创建一个风尚云网全能圈子!

相关文章:

风尚云网前端学习:制作一款简易的在线计算器

风尚云网前端学习&#xff1a;制作一款简易的在线计算器 简介 在前端开发的学习过程中&#xff0c;实现一个简单的在线计算器是一个常见的练习项目。它不仅能够帮助我们熟悉HTML、CSS和JavaScript的基本用法&#xff0c;还能够加深我们对事件处理和DOM操作的理解。今天&#…...

Android蓝牙架构,源文件目录/编译方式学习

Android 版本 发布时间 代号&#xff08;Codename&#xff09; Android 1.0 2008年9月23日 无 Android 1.1 2009年2月9日 Petit Four Android 1.5 2009年4月27日 Cupcake Android 1.6 2009年9月15日 Donut Android 2.0 2009年10月26日 Eclair Android 2.1 2…...

ubuntu中使用ffmpeg和nginx推流rtmp视频

最近在测试ffmpeg推流rtmp视频&#xff0c;单独安装ffmpeg是无法完成推流的&#xff0c;需要一个流媒体服务器&#xff0c;常用nginx&#xff0c;可以直接在ubuntu虚拟机里面测试一下。 测试过程不涉及编译ffmpeg和nginx&#xff0c;仅使用基本功能&#xff1a; 1 安装ffmpeg …...

strongswan测试流程

测试shell脚本文件testing/do-tests&#xff0c;测试配置文件testing/testing.conf。do-tests脚本不加参数&#xff0c;将依次执行testing/tests/目录下的所有测试用例。do-tests脚本有两个参数-v和-t&#xff0c;前者在测试中记录详细信息&#xff0c;后者在输出信息中增加时间…...

[CKS] CIS基准测试,修复kubelet和etcd不安全项

目前的所有题目为2024年10月后更新的最新题库&#xff0c;考试的k8s版本为1.31.1 ​ 专栏其他文章: [CKS] K8S Admission Set Up[CKS] CIS基准测试&#xff0c;修复kubelet和etcd不安全项[CKS] K8S NetworkPolicy Set Up[CKS] 利用Trivy对image进行扫描[CKS] 利用falco进行容器…...

Linux/Windows/OSX 上面应用程序重新启动运行。

1、Linux/OSX 上面重新运行程序&#xff0c;直接使用 execvp 函数就可以了&#xff0c;把main 函数传递来的 argv 二维数组&#xff08;命令行参数&#xff09;传进去就可以&#xff0c;注意不要在 fork 出来的子进程搞。 2、Windows 平台可以通过 CreateProcess 函数来创建新的…...

React拆分组件中的传值问题

在我们实际项目开发中&#xff0c;很多时候为为了项目后期便于维护&#xff0c;都会将相关的组件进行拆分&#xff0c;拆分过后&#xff0c;会将数据方法在父组件中进行编写&#xff0c;然后将一些逻辑拆分为组件&#xff0c;在这个过程中&#xff0c;最重要的就是数据的传递&a…...

RocketMQ的使⽤

初识MQ 1.1.同步和异步通讯 微服务间通讯有同步和异步两种⽅式&#xff1a; 同步通讯&#xff1a;就像打电话&#xff0c;需要实时响应。 异步通讯&#xff1a;就像发邮件&#xff0c;不需要⻢上回复。 两种⽅式各有优劣&#xff0c;打电话可以⽴即得到响应&#xff0c;但…...

Android Studio 设置不显示 build-tool 无法下载

2024版本查看build-tool版本 File -> Settings -> Languages & Frameworks -> Android SDK 或者直接打开Settings后搜索“SDK” 解决方案 将 Android Studio 升级到2022.2.1以上的版本将 C:/Windows/System32/drivers/etc/hosts 文件用管理员身份打开&#xff0c…...

【Y20030007】基于java+servlet+mysql的垃圾分类网站的设计与实现(附源码 配置 文档)

网垃圾分类网站的设计与实现 1.摘要2.开发目的和意义3.系统功能设计4.系统界面截图5.源码获取 1.摘要 随着全球环境保护意识的提升&#xff0c;垃圾分类已成为一项紧迫且重要的任务。为了有效推动垃圾分类的实施&#xff0c;提升公众的环保意识和参与度&#xff0c;垃圾分类已…...

细说敏捷:敏捷四会之standup meeting

上一篇文章中&#xff0c;我们讨论了 敏捷四会 中 冲刺计划会 的实施要点&#xff0c;本篇我们继续分享敏捷四会中实施最频繁&#xff0c;团队最容易实施但往往也最容易走形的第二个会议&#xff1a;每日站会 关于每日站会的误区 站会是一个比较有标志性的仪式活动&#xff0…...

ThinkPHP8使用workerman

应用场景说明&#xff1a;通过建立通信&#xff0c;不同用户进行消息推送或数据更新&#xff0c;因为本身需要作为服务端进行主动消息推送&#xff0c;因此使用Gateway方式&#xff0c;如果不需要的可以不采用这种形式&#xff0c;以下内容仅为参考&#xff0c;具体业务场景&am…...

C语言超详细教程

系列文章目录 文章目录 系列文章目录1 运算符1.1 算术运算符:2 控制语句2.1 条件语句:2.2 循环语句:3 函数3.1 函数的定义与声明:3.2 递归函数:4 指针4.1 指针的定义与使用函数指针:5. 数组与字符串5.1 数组一维数组:相同类型元素的集合(如:多维数组:数组的数组(如:…...

[开源]3K+ star!微软Office的平替工具,跨平台,超赞!

大家好&#xff0c;我是JavaCodexPro&#xff01; 数字化的当下&#xff0c;高效的办公工具是提升工作效率的关键&#xff0c;然而大家想到的一定是 Microsoft Office 办公软件&#xff0c;然而价格也是相当具有贵的性价比。 今天JavaCodexPro给大家分享一款超棒的开源办公套…...

如何借助计算机视觉算法通过识别水尺精准识别水位

如何借助计算机视觉算法通过识别水尺精准识别水位 随着技术的发展&#xff0c;计算机视觉在多个领域得到了广泛的应用&#xff0c;尤其是在环境监测方面。本文将介绍一种利用计算机视觉算法通过识别水尺来精准识别水位的方法。这种方法可以用于河流、水库等场景的水位监测&…...

C++(进阶) 第1章 继承

C&#xff08;进阶) 第1章 继承 文章目录 前言一、继承1.什么是继承2.继承的使用 二、继承方式1.private成员变量的&#xff08;3种继承方式&#xff09;继承2. private继承方式3.继承基类成员访问⽅式的变化 三、基类和派生类间的转换1.切片 四、 继承中的作⽤域1.隐藏规则&am…...

获国家权威机构认可 亚信安全荣获CNVD技术组支撑单位认证

近日&#xff0c;国家信息安全漏洞共享平台&#xff08;CNVD&#xff09;依据《CNVD管理办法》及《CNVD支撑单位能力要求》&#xff0c;对申请加入考察期的单位进行了全面而严格的能力评估。经过层层筛选与审核&#xff0c;亚信安全凭借卓越的技术实力与专业的服务能力&#xf…...

2. Autogen官网教程 (Terminating Conversations Between Agents)

在这一章中&#xff0c;我们将探讨如何结束自动生成代理之间的对话。 导入必要的库 import osfrom autogen import ConversableAgent配置智能体 我们需要配置智能体使用的语言模型&#xff08;LLM&#xff09;。以下是一个配置示例&#xff1a; llm_config {"config_…...

java 排序 详解

Java 提供了多种方式对数据进行排序&#xff0c;包括数组和集合的排序。排序在日常开发中非常常见&#xff0c;以下将从排序算法的基本原理、Java 中的内置排序方法以及自定义排序三方面进行详解。 1. 排序的基本概念 排序是将一组数据按特定顺序排列的过程&#xff0c;常见顺…...

【数据集】城市通量塔站点观测数据

【数据集】城市通量塔站点观测数据 数据概述数据下载参考数据概述 数据集简介:Harmonized gap-filled dataset from 20 urban flux tower sites 数据集名称:Harmonized gap-filled dataset from 20 urban flux tower sites (用于 Urban-PLUMBER 项目的 20 个城市通量塔站点…...

stm32G473的flash模式是单bank还是双bank?

今天突然有人stm32G473的flash模式是单bank还是双bank&#xff1f;由于时间太久&#xff0c;我真忘记了。搜搜发现&#xff0c;还真有人和我一样。见下面的链接&#xff1a;https://shequ.stmicroelectronics.cn/forum.php?modviewthread&tid644563 根据STM32G4系列参考手…...

Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务

通过akshare库&#xff0c;获取股票数据&#xff0c;并生成TabPFN这个模型 可以识别、处理的格式&#xff0c;写一个完整的预处理示例&#xff0c;并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务&#xff0c;进行预测并输…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

【C语言练习】080. 使用C语言实现简单的数据库操作

080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码:使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出:5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...

今日科技热点速览

&#x1f525; 今日科技热点速览 &#x1f3ae; 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售&#xff0c;主打更强图形性能与沉浸式体验&#xff0c;支持多模态交互&#xff0c;受到全球玩家热捧 。 &#x1f916; 人工智能持续突破 DeepSeek-R1&…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

并发编程 - go版

1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程&#xff0c;系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...

群晖NAS如何在虚拟机创建飞牛NAS

套件中心下载安装Virtual Machine Manager 创建虚拟机 配置虚拟机 飞牛官网下载 https://iso.liveupdate.fnnas.com/x86_64/trim/fnos-0.9.2-863.iso 群晖NAS如何在虚拟机创建飞牛NAS - 个人信息分享...

毫米波雷达基础理论(3D+4D)

3D、4D毫米波雷达基础知识及厂商选型 PreView : https://mp.weixin.qq.com/s/bQkju4r6med7I3TBGJI_bQ 1. FMCW毫米波雷达基础知识 主要参考博文&#xff1a; 一文入门汽车毫米波雷达基本原理 &#xff1a;https://mp.weixin.qq.com/s/_EN7A5lKcz2Eh8dLnjE19w 毫米波雷达基础…...

从面试角度回答Android中ContentProvider启动原理

Android中ContentProvider原理的面试角度解析&#xff0c;分为​​已启动​​和​​未启动​​两种场景&#xff1a; 一、ContentProvider已启动的情况 1. ​​核心流程​​ ​​触发条件​​&#xff1a;当其他组件&#xff08;如Activity、Service&#xff09;通过ContentR…...