当前位置: 首页 > 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 个城市通量塔站点…...

无法与IP建立连接,未能下载VSCode服务器

如题&#xff0c;在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈&#xff0c;发现是VSCode版本自动更新惹的祸&#xff01;&#xff01;&#xff01; 在VSCode的帮助->关于这里发现前几天VSCode自动更新了&#xff0c;我的版本号变成了1.100.3 才导致了远程连接出…...

微信小程序 - 手机震动

一、界面 <button type"primary" bindtap"shortVibrate">短震动</button> <button type"primary" bindtap"longVibrate">长震动</button> 二、js逻辑代码 注&#xff1a;文档 https://developers.weixin.qq…...

2025 后端自学UNIAPP【项目实战:旅游项目】6、我的收藏页面

代码框架视图 1、先添加一个获取收藏景点的列表请求 【在文件my_api.js文件中添加】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

论文解读:交大港大上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架(一)

宇树机器人多姿态起立控制强化学习框架论文解析 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化学习框架&#xff08;一&#xff09; 论文解读&#xff1a;交大&港大&上海AI Lab开源论文 | 宇树机器人多姿态起立控制强化…...

土地利用/土地覆盖遥感解译与基于CLUE模型未来变化情景预测;从基础到高级,涵盖ArcGIS数据处理、ENVI遥感解译与CLUE模型情景模拟等

&#x1f50d; 土地利用/土地覆盖数据是生态、环境和气象等诸多领域模型的关键输入参数。通过遥感影像解译技术&#xff0c;可以精准获取历史或当前任何一个区域的土地利用/土地覆盖情况。这些数据不仅能够用于评估区域生态环境的变化趋势&#xff0c;还能有效评价重大生态工程…...

【OSG学习笔记】Day 16: 骨骼动画与蒙皮(osgAnimation)

骨骼动画基础 骨骼动画是 3D 计算机图形中常用的技术&#xff0c;它通过以下两个主要组件实现角色动画。 骨骼系统 (Skeleton)&#xff1a;由层级结构的骨头组成&#xff0c;类似于人体骨骼蒙皮 (Mesh Skinning)&#xff1a;将模型网格顶点绑定到骨骼上&#xff0c;使骨骼移动…...

3403. 从盒子中找出字典序最大的字符串 I

3403. 从盒子中找出字典序最大的字符串 I 题目链接&#xff1a;3403. 从盒子中找出字典序最大的字符串 I 代码如下&#xff1a; class Solution { public:string answerString(string word, int numFriends) {if (numFriends 1) {return word;}string res;for (int i 0;i &…...

GO协程(Goroutine)问题总结

在使用Go语言来编写代码时&#xff0c;遇到的一些问题总结一下 [参考文档]&#xff1a;https://www.topgoer.com/%E5%B9%B6%E5%8F%91%E7%BC%96%E7%A8%8B/goroutine.html 1. main()函数默认的Goroutine 场景再现&#xff1a; 今天在看到这个教程的时候&#xff0c;在自己的电…...

作为测试我们应该关注redis哪些方面

1、功能测试 数据结构操作&#xff1a;验证字符串、列表、哈希、集合和有序的基本操作是否正确 持久化&#xff1a;测试aof和aof持久化机制&#xff0c;确保数据在开启后正确恢复。 事务&#xff1a;检查事务的原子性和回滚机制。 发布订阅&#xff1a;确保消息正确传递。 2、性…...