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

使用JavaScript写一个网页端的四则运算器

news 2025/9/14 14:56:51

目录

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 {…...

编程日记 2024/10/7 8:00:15

Linux find命令详解及实用示例

Linux 系统中的 find 命令是一个功能强大的工具&#xff0c;用于在文件系统中搜索文件并执行相应的操作。无论是系统管理员还是普通用户&#xff0c;掌握 find 命令都能极大地提高工作效率。本文将详细介绍 find 命令的用法&#xff0c;并通过多个示例展示其在实际中的应用。 …...

编程日记 2024/10/7 7:58:14

CSS基础-常见属性（二）

6、CSS三大特性 6.1 层叠性 如果样式发生冲突&#xff0c;则按照优先级进行覆盖。 6.2 继承性 元素自动继承其父元素、祖先元素所设置的某些元素&#xff0c;优先继承较近的元素。 6.3 优先级 6.3.1 简单分级 1、内联样式2、ID选择器3、类选择器/属性选择器4、标签名选择器/…...

编程日记 2024/10/7 7:57:13

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…...

编程日记 2024/10/7 7:54:09

如何利用免费音频剪辑软件制作出精彩音频

现在有许多免费的音频剪辑软件可供选择&#xff0c;它们为广大用户提供了丰富的功能和便捷的操作体验&#xff0c;让音频编辑变得更加轻松和有趣。接下来&#xff0c;让我们一起走进这些免费音频剪辑软件的世界&#xff0c;探索它们的独特魅力和强大功能。 1.福昕音频剪辑 链…...

编程日记 2024/10/7 7:49:05

安宝特分享 | AR技术重塑工业：数字孪生与沉浸式培训的创新应用

在数字化转型的浪潮中&#xff0c;AR&#xff08;增强现实&#xff09;技术与工业的结合正在呈现新的趋势和应用延伸。特别是“数字孪生”概念的崛起&#xff0c;为AR技术在工业中提供了独特而创新的切入点。 本文将探索AR如何与数字孪生、沉浸式体验和实用案例相结合&#xf…...

编程日记 2024/10/7 7:46:02

专题十_穷举vs暴搜vs深搜vs回溯vs剪枝_二叉树的深度优先搜索_算法专题详细总结

目录 搜索 vs 深度优先遍历 vs 深度优先搜索 vs 宽度优先遍历 vs 宽度优先搜索 vs 暴搜 1.深度优先遍历 vs 深度优先搜索(dfs) 2.宽度优先遍历 vs 宽度优先搜索(bfs) 2.关系图暴力枚举一遍所有的情况 3.拓展搜索问题全排列 决策树 1. 计算布尔⼆叉树的值&#xff08;medi…...

编程日记 2024/10/7 7:40:58

基于springboot vue3 在线考试系统设计与实现 源码数据库 文档

博主介绍&#xff1a;专注于Java&#xff08;springboot ssm springcloud等开发框架&#xff09; vue .net php phython node.js uniapp小程序 等诸多技术领域和毕业项目实战、企业信息化系统建设&#xff0c;从业十五余年开发设计教学工作☆☆☆ 精彩专栏推荐订阅☆☆☆☆…...

编程日记 2024/10/7 7:36:55

什么是 HTTP 请求中的 options 请求？

在 Chrome 开发者工具中的 Network 面板看到的 HTTP 方法 OPTIONS&#xff0c;其实是 HTTP 协议的一部分&#xff0c;用于客户端和服务器之间进行“预检”或“协商”。OPTIONS 请求的作用是让客户端能够获取关于服务器支持的 HTTP 方法和其他跨域资源共享 (CORS) 相关的信息&am…...

编程日记 2024/10/7 7:35:54

[图形学]smallpt代码详解（1）

一、简介 本文介绍了著名的99行代码实现全局光照的光线跟踪代码smallpt。 包括对smallpt的功能介绍、编译运行介绍&#xff0c;和对代码的详细解释。希望能够帮助读者更进一步的理解光线跟踪。 二、smallpt介绍 1.smallpt是什么 smallpt(small Path Tracing) 是一个全局光照…...

编程日记 2024/10/7 7:34:53

Vite多环境配置与打包:

环境变量必须以VITE开头 1.VITE_BASE_API&#xff1a; 在开发环境中设置为 /dev-api&#xff0c;这是一个本地 mock 地址&#xff0c;通常用于模拟后端接口。 2.VITE_ENABLE_ERUDA&#xff1a; 设置为 "true"&#xff0c;表示启用调试工具&#xff0c;通常是为了…...

编程日记 2024/10/7 7:31:48

git维护【.gitignore文件】

在工程下添加 .gitignore 文件【git忽略文件】 *.class .idea *.iml *.jar /*/target/...

编程日记 2024/10/7 7:30:47

【Canvas与色彩】十六等分多彩隔断圆环

【成图】 【代码】 <!DOCTYPE html> <html lang"utf-8"> <meta http-equiv"Content-Type" content"text/html; charsetutf-8"/> <head><title>隔断圆环Draft5十六等分多彩</title><style type"text…...

编程日记 2024/10/7 7:29:46

什么是pip? -- Python 包管理工具

前言 不同的编程语言通常都有自己的包管理工具&#xff0c;这些工具旨在简化项目的依赖管理、构建过程和开发效率&#xff0c;同时促进代码的复用和共享。每个包管理工具都有其独特的特点和优势&#xff0c;开发者可以根据自己的编程语言和项目需求选择合适的包管理工具。 pip是…...

编程日记 2024/10/7 7:28:45

FastAPI框架使用枚举来型来限定参数、FastApi框架隐藏没多大意义的Schemes模型部分内容以及常见的WSGI服务器Gunicorn、uWSGI了解

一、FastAPI框架使用枚举来型来限定参数 FastAPI框架验证时&#xff0c;有时需要通过枚举的方式来限定参数只能为某几个值中的一个&#xff0c;这时就可以使用FastAPI框架的枚举类型Enum了。publish:December 23, 2020 -Wednesday 代码如下&#xff1a; #引入Enum模块 from fa…...

编程日记 2024/10/7 7:27:44

OceanBase—02（入门篇——对于单副本单节点，由1个observer扩容为3个observer集群）——之前的记录，当初有的问题未解决，目前新版未尝试

OceanBase—02&#xff08;入门篇——对于单副本单节点&#xff0c;由1个observer扩容为3个observer集群&#xff09;——之前的记录&#xff0c;有的问题未解决&#xff0c;新版未尝试 1、前言—安装单副本单节点集群1.1 docker安装OB 2、查看现有集群情况2.1 进入容器&#x…...

编程日记 2024/10/7 7:26:42

前沿论文创新点集合

系列文章目录 文章目录 系列文章目录一、《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…...

编程日记 2024/10/7 7:23:40

刷题记录（好题）

Problem - D - Codeforces 思路&#xff1a; 滑动窗口思想&#xff0c;一个数组记录起始点&#xff08;记录出现过的次数&#xff09;&#xff0c;另一个数组记录截至点&#xff08;记录出现过的次数&#xff09;&#xff0c;从0开始遍历&#xff0c;设定一个长度为d的滑动窗口…...

编程日记 2024/10/7 7:22:39

【大数据入门 | Hive】函数{单行函数，集合函数，炸裂函数，窗口函数}

1. 函数简介&#xff1a; Hive会将常用的逻辑封装成函数给用户进行使用&#xff0c;类似于Java中的函数。 好处&#xff1a;避免用户反复写逻辑&#xff0c;可以直接拿来使用。 重点&#xff1a;用户需要知道函数叫什么&#xff0c;能做什么。 Hive提供了大量的内置函数&am…...

编程日记 2024/10/7 7:19:35

python sqlite3 工具函数

起因&#xff0c; 目的: sqlite3 最常用的函数。 比如&#xff0c;某人给了一个 database.db 文件。 但是你登录的时候&#xff0c;不知道账号密码。 此文件就是&#xff0c;查看这个数据库的详细内容。 有哪些表某个表的全部内容。添加数据 代码&#xff0c; 见注释 impor…...

编程日记 2024/10/7 7:17:33

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统，利用大模型实现智能 UI 自动化，结合计算机视觉和自然语言处理技术，实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

编程新知 2025/9/10 1:23:08

golang循环变量捕获问题​​

在 Go 语言中&#xff0c;当在循环中启动协程&#xff08;goroutine&#xff09;时&#xff0c;如果在协程闭包中直接引用循环变量&#xff0c;可能会遇到一个常见的陷阱 - ​​循环变量捕获问题​​。让我详细解释一下&#xff1a; 问题背景 看这个代码片段&#xff1a; fo…...

编程新知 2025/7/5 11:03:11

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

编程新知 2025/9/9 10:12:13

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

编程新知 2025/9/6 15:42:34

java 实现excel文件转pdf | 无水印 | 无限制

文章目录 目录 文章目录 前言 1.项目远程仓库配置 2.pom文件引入相关依赖 3.代码破解 二、Excel转PDF 1.代码实现 2.Aspose.License.xml 授权文件 总结 前言 java处理excel转pdf一直没找到什么好用的免费jar包工具，自己手写的难度，恐怕高级程序员花费一年的事件，也…...

编程新知 2025/7/18 10:35:00

UDP(Echoserver)

网络命令 Ping 命令 检测网络是否连通 使用方法: ping -c 次数 网址ping -c 3 www.baidu.comnetstat 命令 netstat 是一个用来查看网络状态的重要工具. 语法&#xff1a;netstat [选项] 功能&#xff1a;查看网络状态 常用选项&#xff1a; n 拒绝显示别名&#…...

编程新知 2025/9/9 14:51:30

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/9/9 14:50:29

.Net Framework 4/C# 关键字（非常用，持续更新...）

一、is 关键字 is 关键字用于检查对象是否于给定类型兼容，如果兼容将返回 true，如果不兼容则返回 false，在进行类型转换前，可以先使用 is 关键字判断对象是否与指定类型兼容，如果兼容才进行转换，这样的转换是安全的。 例如有：首先创建一个字符串对象，然后将字符串对象隐…...

编程新知 2025/8/28 21:08:38

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2025/9/7 8:50:41

Web 架构之 CDN 加速原理与落地实践

文章目录 一、思维导图二、正文内容&#xff08;一&#xff09;CDN 基础概念1. 定义2. 组成部分 &#xff08;二&#xff09;CDN 加速原理1. 请求路由2. 内容缓存3. 内容更新 &#xff08;三&#xff09;CDN 落地实践1. 选择 CDN 服务商2. 配置 CDN3. 集成到 Web 架构 &#xf…...

编程新知 2025/9/13 16:17:01