使用JavaScript写一个网页端的四则运算器
目录
style(内联样式表部分)
body部分
html
script
总的代码
网页演示
style(内联样式表部分)
<style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.calculator {padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: white;width: 300px;}.input-group {display: flex;flex-direction: row;margin-bottom: 10px;}.input-group label {width: 100px;text-align: right;padding-right: 10px;}.input-group input {flex-grow: 1;}.result {margin-top: 20px;text-align: center;}</style>设置了元素选择器（body）和很多类选择器。
font-family: 页面使用的字体
display: flex: 使用弹性盒子布局
justify-content: center: 内容居中对齐
align-items: center: 垂直居中对齐
height: 100vh: 高度为视口高度
background-color: 背景颜色
padding: 内边距
border: 边框样式
border-radius: 圆角
background-color: 背景颜色
width: 宽度
flex-direction: row: 子元素水平排列
margin-bottom: 下边距
text-align: right: 文本右对齐
padding-right: 右边距
flex-grow: 1: 填充剩余空间
text-align: 文本居中对齐
body部分
html
<div class="calculator"><h2>四则运算计算器</h2><div class="input-group"><label for="num1">数字 1:</label><input type="number" id="num1" required></div><div class="input-group"><label for="operator">运算符:</label><select id="operator"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select></div><div class="input-group"><label for="num2">数字 2:</label><input type="number" id="num2" required></div><button id="calculateButton">计算</button><div class="result"><p>结果: <span id="result"></span></p></div>定义数字 1 的输入框：
label: 标签（num1）。
input: 输入框，类型为数字（number），要求必填（required）。
定义运算符的选择框：
label: 标签（operator）。
select: 下拉选择框（加减乘除四个选项）。
option: 选项。
定义数字 2 的输入框：
label: 标签（num2）。
input: 输入框，类型为数字（number），要求必填（required）。
提交按钮（button），用于触发计算操作。
定义结果（result）显示区域：
div: 包装元素result。
p: 段落，包含结果显示文本。
span: 用于显示计算结果。
script
<script>// 获取元素引用var num1Input = document.getElementById("num1");var num2Input = document.getElementById("num2");var operatorSelect = document.getElementById("operator");var calculateButton = document.getElementById("calculateButton");var resultSpan = document.getElementById("result");// 添加点击事件监听器calculateButton.addEventListener('click', function() {var num1 = parseFloat(num1Input.value);var num2 = parseFloat(num2Input.value);var operator = operatorSelect.value;var result = performCalculation(num1, num2, operator);resultSpan.textContent = result;});// 计算函数function performCalculation(num1, num2, operator) {switch (operator) {case '+':return num1 + num2;case '-':return num1 - num2;case '*':return num1 * num2;case '/':if (num2 === 0) {alert("除数不能为零！");return null;}return num1 / num2;default:alert("无效的运算符！");return null;}}</script> // 获取元素引用var num1Input = document.getElementById("num1");var num2Input = document.getElementById("num2");var operatorSelect = document.getElementById("operator");var calculateButton = document.getElementById("calculateButton");var resultSpan = document.getElementById("result");定义5个变量获取页面上的各个元素引用：
num1Input: 数字 1 的输入框。
num2Input: 数字 2 的输入框。
operatorSelect: 运算符选择框。
calculateButton: 计算按钮。
resultSpan: 显示结果的 span 元素。
calculateButton.addEventListener('click', function() {var num1 = parseFloat(num1Input.value);var num2 = parseFloat(num2Input.value);var operator = operatorSelect.value;var result = performCalculation(num1, num2, operator);resultSpan.textContent = result;});添加点击事件监听器：
如果用户点击了button，就将输入的num1赋值给num1，输入的num2赋值给num2，输入的运算符赋值给operator，将result使用performCalculation函数计算出，并将结果更新到页面的结果显示区域。
parseFloat: 将字符串转换为浮点数。
value: 获取输入框的值。
// 计算函数function performCalculation(num1, num2, operator) {switch (operator) {case '+':return num1 + num2;case '-':return num1 - num2;case '*':return num1 * num2;case '/':if (num2 === 0) {alert("除数不能为零！");return null;}return num1 / num2;default:alert("无效的运算符！");return null;}计算函数：
检测不同的运算符，如果是加减乘就进行对应的运算，如果是除法要特判一下除数不能为0，如果为0就使用alert弹出警告。
如果输入的运算符不是加减乘除中的一种，同样要使用alert发出警告，无效的运算符。
总的代码
<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>四则运算计算器</title><style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.calculator {padding: 20px;border: 1px solid #ccc;border-radius: 5px;background-color: white;width: 300px;}.input-group {display: flex;flex-direction: row;margin-bottom: 10px;}.input-group label {width: 100px;text-align: right;padding-right: 10px;}.input-group input {flex-grow: 1;}.result {margin-top: 20px;text-align: center;}</style>
</head>
<body><div class="calculator"><h2>四则运算计算器</h2><div class="input-group"><label for="num1">数字 1:</label><input type="number" id="num1" required></div><div class="input-group"><label for="operator">运算符:</label><select id="operator"><option value="+">+</option><option value="-">-</option><option value="*">*</option><option value="/">/</option></select></div><div class="input-group"><label for="num2">数字 2:</label><input type="number" id="num2" required></div><button id="calculateButton">计算</button><div class="result"><p>结果: <span id="result"></span></p></div></div><script>// 获取元素引用var num1Input = document.getElementById("num1");var num2Input = document.getElementById("num2");var operatorSelect = document.getElementById("operator");var calculateButton = document.getElementById("calculateButton");var resultSpan = document.getElementById("result");// 添加点击事件监听器calculateButton.addEventListener('click', function() {var num1 = parseFloat(num1Input.value);var num2 = parseFloat(num2Input.value);var operator = operatorSelect.value;var result = performCalculation(num1, num2, operator);resultSpan.textContent = result;});// 计算函数function performCalculation(num1, num2, operator) {switch (operator) {case '+':return num1 + num2;case '-':return num1 - num2;case '*':return num1 * num2;case '/':if (num2 === 0) {alert("除数不能为零！");return null;}return num1 / num2;default:alert("无效的运算符！");return null;}}</script>
</body>
</html>网页演示
相关文章：
使用JavaScript写一个网页端的四则运算器
目录 style(内联样式表部分) body部分 html script 总的代码 网页演示 style(内联样式表部分) <style>body {font-family: Arial, sans-serif;display: flex;justify-content: center;align-items: center;height: 100vh;background-color: #f0f0f0;}.calculator {…...
Linux find命令详解及实用示例
Linux 系统中的 find 命令是一个功能强大的工具，用于在文件系统中搜索文件并执行相应的操作。无论是系统管理员还是普通用户，掌握 find 命令都能极大地提高工作效率。本文将详细介绍 find 命令的用法，并通过多个示例展示其在实际中的应用。 …...
CSS基础-常见属性（二）
6、CSS三大特性 6.1 层叠性 如果样式发生冲突，则按照优先级进行覆盖。 6.2 继承性 元素自动继承其父元素、祖先元素所设置的某些元素，优先继承较近的元素。 6.3 优先级 6.3.1 简单分级 1、内联样式2、ID选择器3、类选择器/属性选择器4、标签名选择器/…...
Spring Boot 2.4.3 + Java 8 升级为 Java 21 + Spring Boot 3.2.0
简简单单 Online zuozuo： 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo 简简单单 Online zuozuo ：本心、输入输出、结果 简简单单 Online zuozuo ： 文章目录 Spring Boot 2.4.3 + Java 8 升级为 Java 21 + Spring Boot 3.2.0前言更换 Java 21 SD…...
如何利用免费音频剪辑软件制作出精彩音频
现在有许多免费的音频剪辑软件可供选择，它们为广大用户提供了丰富的功能和便捷的操作体验，让音频编辑变得更加轻松和有趣。接下来，让我们一起走进这些免费音频剪辑软件的世界，探索它们的独特魅力和强大功能。 1.福昕音频剪辑 链…...
安宝特分享 | AR技术重塑工业：数字孪生与沉浸式培训的创新应用
在数字化转型的浪潮中，AR（增强现实）技术与工业的结合正在呈现新的趋势和应用延伸。特别是“数字孪生”概念的崛起，为AR技术在工业中提供了独特而创新的切入点。 本文将探索AR如何与数字孪生、沉浸式体验和实用案例相结合…...
专题十_穷举vs暴搜vs深搜vs回溯vs剪枝_二叉树的深度优先搜索_算法专题详细总结
目录 搜索 vs 深度优先遍历 vs 深度优先搜索 vs 宽度优先遍历 vs 宽度优先搜索 vs 暴搜 1.深度优先遍历 vs 深度优先搜索(dfs) 2.宽度优先遍历 vs 宽度优先搜索(bfs) 2.关系图暴力枚举一遍所有的情况 3.拓展搜索问题全排列 决策树 1. 计算布尔⼆叉树的值（medi…...
基于springboot vue3 在线考试系统设计与实现 源码数据库 文档
博主介绍：专注于Java（springboot ssm springcloud等开发框架） vue .net php phython node.js uniapp小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设，从业十五余年开发设计教学工作☆☆☆ 精彩专栏推荐订阅☆☆☆☆…...
什么是 HTTP 请求中的 options 请求？
在 Chrome 开发者工具中的 Network 面板看到的 HTTP 方法 OPTIONS，其实是 HTTP 协议的一部分，用于客户端和服务器之间进行“预检”或“协商”。OPTIONS 请求的作用是让客户端能够获取关于服务器支持的 HTTP 方法和其他跨域资源共享 (CORS) 相关的信息&am…...
[图形学]smallpt代码详解（1）
一、简介 本文介绍了著名的99行代码实现全局光照的光线跟踪代码smallpt。 包括对smallpt的功能介绍、编译运行介绍，和对代码的详细解释。希望能够帮助读者更进一步的理解光线跟踪。 二、smallpt介绍 1.smallpt是什么 smallpt(small Path Tracing) 是一个全局光照…...
Vite多环境配置与打包:
环境变量必须以VITE开头 1.VITE_BASE_API： 在开发环境中设置为 /dev-api，这是一个本地 mock 地址，通常用于模拟后端接口。 2.VITE_ENABLE_ERUDA： 设置为 "true"，表示启用调试工具，通常是为了…...
git维护【.gitignore文件】
在工程下添加 .gitignore 文件【git忽略文件】 *.class .idea *.iml *.jar /*/target/...
【Canvas与色彩】十六等分多彩隔断圆环
【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>隔断圆环Draft5十六等分多彩</title><style type"text…...
什么是pip? -- Python 包管理工具
前言 不同的编程语言通常都有自己的包管理工具，这些工具旨在简化项目的依赖管理、构建过程和开发效率，同时促进代码的复用和共享。每个包管理工具都有其独特的特点和优势，开发者可以根据自己的编程语言和项目需求选择合适的包管理工具。 pip是…...
FastAPI框架使用枚举来型来限定参数、FastApi框架隐藏没多大意义的Schemes模型部分内容以及常见的WSGI服务器Gunicorn、uWSGI了解
一、FastAPI框架使用枚举来型来限定参数 FastAPI框架验证时，有时需要通过枚举的方式来限定参数只能为某几个值中的一个，这时就可以使用FastAPI框架的枚举类型Enum了。publish:December 23, 2020 -Wednesday 代码如下： #引入Enum模块 from fa…...
OceanBase—02（入门篇——对于单副本单节点，由1个observer扩容为3个observer集群）——之前的记录，当初有的问题未解决，目前新版未尝试
OceanBase—02（入门篇——对于单副本单节点，由1个observer扩容为3个observer集群）——之前的记录，有的问题未解决，新版未尝试 1、前言—安装单副本单节点集群1.1 docker安装OB 2、查看现有集群情况2.1 进入容器&#x…...
前沿论文创新点集合
系列文章目录 文章目录 系列文章目录一、《LAMM: Label Alignment for Multi-Modal Prompt Learning》二、《MaPLe: Multi-modal Prompt Learning》三、《Learning to Prompt for Vision-Language Models》CoOp四、《MobileCLIP: Fast Image-Text Models through Multi-Modal R…...
刷题记录（好题）
Problem - D - Codeforces 思路： 滑动窗口思想，一个数组记录起始点（记录出现过的次数），另一个数组记录截至点（记录出现过的次数），从0开始遍历，设定一个长度为d的滑动窗口…...
【大数据入门 | Hive】函数{单行函数，集合函数，炸裂函数，窗口函数}
1. 函数简介： Hive会将常用的逻辑封装成函数给用户进行使用，类似于Java中的函数。 好处：避免用户反复写逻辑，可以直接拿来使用。 重点：用户需要知道函数叫什么，能做什么。 Hive提供了大量的内置函数&am…...
python sqlite3 工具函数
起因， 目的: sqlite3 最常用的函数。 比如，某人给了一个 database.db 文件。 但是你登录的时候，不知道账号密码。 此文件就是，查看这个数据库的详细内容。 有哪些表某个表的全部内容。添加数据 代码， 见注释 impor…...
顺丰Android面试题集锦及参考答案
TCP 三次握手和四次挥手是什么，挥手过程中主动方的状态是什么？ TCP 三次握手是建立连接的过程： 第一次握手：客户端向服务器发送一个 SYN 报文，该报文包含客户端的初始序列号（seq=x）。此时客户端进入 SYN_SENT 状态。第二次握手：服务器收到客户端的 SYN 报文后，向客户端…...
uniapp中检测应用更新的两种方式-升级中心之uni-upgrade-center-app
uniapp一个很是用的功能，就是在我们发布新版本的app后，需要提示用户进行app更新，并告知用户我们新版的app更新信息，以使得用户能及时使用上我们新开发的功能，提升用户的实用度和粘性。注意:这个功能只能在app端使用 效…...
Python爬虫通过 Cookie 和会话管理来维持其在网站上的会话状态
Python 爬虫虽然是一个热门且非常实用的技术领域，但在实际开发中，确实存在一些困难的地方。以下是 Python 爬虫开发中常见的难点和挑战： 1. 处理反爬虫机制 许多网站为防止爬虫的恶意访问，采取了各种反爬虫措施。常见的反爬虫技…...
使用STM32单片机实现无人机控制系统
无人机控制系统是无人机的大脑，负责处理无人机的姿态控制、导航和通信等功能。本文将详细介绍如何使用STM32单片机实现无人机控制系统，包括硬件设计、软件设计、系统调试与测试等内容。 一、系统概述 无人机控制系统通常包括飞行控制器、传感器、执行器…...
【包教包会】2D图片实现3D透视效果（支持3.x、支持原生、可合批）
将去年写的SpriteFlipper从2.x升级到3.x。 如果需要2.x版本或需要了解算法思路，请移步：https://blog.csdn.net/weixin_42714632/article/details/136745051 优化功能：可同时绕X轴和Y轴旋转，两者效果会叠加。 完美适配Web、原生…...
解决nginx+tomcat宕机完美解决方案
问题描述：公司项目太老了，还是tomcat项目，部署两台tomcat,做了nginx负载。最近发现每到上午10，下午3点，tomcat就宕机了，死活找不到原因，客户影响超期差，实在让人头疼。 解决思路&am…...
第十一章 缓存之更新/穿透/雪崩/击穿
目录 一、什么是缓存 二、缓存更新策略 2.1. 缓存主动更新策略 2.1.1. Cache Aside模式（主流） 2.1.2. Read/Write Through模式 2.1.3. Write Behind模式 2.1.4. 总结 三、缓存穿透 四、缓存雪崩 五、缓存击穿 5.1. 互斥锁实现 5.1.1…...
一款完全开源并免费的监测与分析系统，支持监测，预警，分析，报告，支持本地化部署（附源码）
前言 在当今这个信息爆炸的时代，企业和个人都需要时刻了解网络上的动态，以便及时了解自身品牌形象和社会舆论的变化。然而，现有的舆情监测工具往往价格昂贵，且cao作复杂，难以满足普通用户的需求。 在这种背景下&…...
python中时间函数及其应用
近段时间，因在改写以前写的学校自动铃声控制系统，又学到了一些新的知识，特记录如下： 一、时间函数基础 1、time模块中的函数及其用法 time.time(): 返回当前时间的时间戳，即自1970年1月1日以来的秒数。 time.localt…...
MoveIt2-humble】入门教程----第一个 C++ MoveIt 程序
四节教程会手把手带你写一个完整的 Moveit 控制程序，包括轨迹规划、RViz可视化、添加碰撞物体、抓取和放置。 1 创建依赖包 进入到教程所在工作空间下的src目录，创建一个新的依赖包。 ros2 pkg create \--build-type ament_cmake \--dependencies mov…...