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

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

news 2026/2/9 11:14:40

目录

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

idea大量爆红问题解决

问题描述 在学习和工作中&#xff0c;idea是程序员不可缺少的一个工具&#xff0c;但是突然在有些时候就会出现大量爆红的问题&#xff0c;发现无法跳转&#xff0c;无论是关机重启或者是替换root都无法解决 就是如上所展示的问题&#xff0c;但是程序依然可以启动。 问题解决…...

编程新知 2026/2/8 6:37:38

云原生核心技术 (7/12): K8s 核心概念白话解读(上)：Pod 和 Deployment 究竟是什么？

大家好&#xff0c;欢迎来到《云原生核心技术》系列的第七篇&#xff01; 在上一篇&#xff0c;我们成功地使用 Minikube 或 kind 在自己的电脑上搭建起了一个迷你但功能完备的 Kubernetes 集群。现在&#xff0c;我们就像一个拥有了一块崭新数字土地的农场主&#xff0c;是时…...

编程新知 2025/12/14 22:32:59

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/11/20 2:48:44

逻辑回归：给不确定性划界的分类大师

想象你是一名医生。面对患者的检查报告&#xff08;肿瘤大小、血液指标&#xff09;&#xff0c;你需要做出一个**决定性判断**&#xff1a;恶性还是良性&#xff1f;这种“非黑即白”的抉择&#xff0c;正是**逻辑回归&#xff08;Logistic Regression&#xff09;** 的战场&a…...

编程新知 2025/10/27 21:25:04

（二）原型模式

原型的功能是将一个已经存在的对象作为源目标，其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现，忽略对象创建过程中的其它细节。 📌 核心特点： 避免重复初…...

编程新知 2026/2/7 10:59:04

C++中string流知识详解和示例

一、概览与类体系 C 提供三种基于内存字符串的流&#xff0c;定义在 <sstream> 中&#xff1a; std::istringstream&#xff1a;输入流&#xff0c;从已有字符串中读取并解析。std::ostringstream&#xff1a;输出流&#xff0c;向内部缓冲区写入内容&#xff0c;最终取…...

编程新知 2025/11/30 11:30:47

九天毕昇深度学习平台 | 如何安装库？

pip install 库名 -i https://pypi.tuna.tsinghua.edu.cn/simple --user 举个例子&#xff1a; 报错 ModuleNotFoundError: No module named torch 那么我需要安装 torch pip install torch -i https://pypi.tuna.tsinghua.edu.cn/simple --user pip install 库名&#x…...

编程新知 2026/1/31 2:13:57

HarmonyOS运动开发：如何用mpchart绘制运动配速图表

##鸿蒙核心技术##运动开发##Sensor Service Kit&#xff08;传感器服务&#xff09;# 前言 在运动类应用中&#xff0c;运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据&#xff0c;如配速、距离、卡路里消耗等&#xff0c;用户可以更清晰…...

编程新知 2026/2/2 7:49:59

Linux 中如何提取压缩文件 ？

Linux 是一种流行的开源操作系统&#xff0c;它提供了许多工具来管理、压缩和解压缩文件。压缩文件有助于节省存储空间&#xff0c;使数据传输更快。本指南将向您展示如何在 Linux 中提取不同类型的压缩文件。 1. Unpacking ZIP Files ZIP 文件是非常常见的&#xff0c;要在 …...

编程新知 2026/2/1 5:38:25

Java数值运算常见陷阱与规避方法

整数除法中的舍入问题 问题现象 当开发者预期进行浮点除法却误用整数除法时，会出现小数部分被截断的情况。典型错误模式如下： void process(int value) {double half = value / 2; // 整数除法导致截断// 使用half变量 }此时...

编程新知 2026/2/4 13:10:38