使用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>

网页演示

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/440246.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pikachu-目录遍历

目录遍历&#xff0c;跟不安全文件上传下载有差不多&#xff1b; 访问 jarheads.php 、truman.php 都是通过 get 请求&#xff0c;往title 参数传参&#xff1b; 在后台&#xff0c;可以看到 jarheads.php 、truman.php所在目录&#xff1a; /var/www/html/vul/dir/soup 图片…

golang gin入门

gin是个小而精的web开发框架 官方文档 安装 go get -u github.com/gin-gonic/gin最简单的起手代码 package mainimport ("net/http""github.com/gin-gonic/gin" )func main() {r : gin.Default()r.GET("/ping", func(c *gin.Context) {c.JSON…

openpnp - 图像传送方向要在高级校正之前设置好

文章目录 openpnp - 图像传送方向要在高级校正之前设置好笔记图像传送方向的确定END openpnp - 图像传送方向要在高级校正之前设置好 笔记 图像传送方向和JOG面板的移动控制和实际设备的顶部摄像头/底部摄像头要一致&#xff0c;这样才能和贴板子时的实际操作方向对应起来。 …

大数据新视界 --大数据大厂之 从 Druid 和 Kafka 到 Polars:大数据处理工具的传承与创新

&#x1f496;&#x1f496;&#x1f496;亲爱的朋友们&#xff0c;热烈欢迎你们来到 青云交的博客&#xff01;能与你们在此邂逅&#xff0c;我满心欢喜&#xff0c;深感无比荣幸。在这个瞬息万变的时代&#xff0c;我们每个人都在苦苦追寻一处能让心灵安然栖息的港湾。而 我的…

【Vue】vue-admin-template项目搭建

准备 node环境 node&#xff1a;v16.12.0npm&#xff1a;8.1.0 vue-element-admin下载 官网&#xff1a;https://panjiachen.github.io/vue-element-admin-site/guide/ 我这边下载的是4.4.0版本的&#xff0c;使用其他版本可能会因为所需要的node和npm版本过低或过高导致异常…

【包教包会】2D图片实现3D透视效果(支持3.x、支持原生、可合批)

将去年写的SpriteFlipper从2.x升级到3.x。 如果需要2.x版本或需要了解算法思路&#xff0c;请移步&#xff1a;https://blog.csdn.net/weixin_42714632/article/details/136745051 优化功能&#xff1a;可同时绕X轴和Y轴旋转&#xff0c;两者效果会叠加。 完美适配Web、原生…

Gridview配置数据源--信任服务器证书

目录 背景过程Gridview配置数据源GridView与数据源&#xff1a;数据库连接与安全&#xff1a;信任服务器证书&#xff1a;配置信任服务器证书&#xff1a;注意事项&#xff1a; 生成连接字符串程序运行报错问题解决 总结 背景 Gridview配置数据源之后&#xff0c;程序报错 过…

k8s的pod的管理和优化

资源管理介绍 在kubernetes中&#xff0c;所有的内容都抽象为资源&#xff0c;用户需要通过操作资源来管理kubernetes。 kubernetes的本质上就是一个集群系统&#xff0c;用户可以在集群中部署各种服务 所谓的部署服务&#xff0c;其实就是在kubernetes集群中运行一个个的容器…

C++ | Leetcode C++题解之第456题132模式

题目&#xff1a; 题解&#xff1a; class Solution { public:bool find132pattern(vector<int>& nums) {int n nums.size();vector<int> candidate_i {nums[0]};vector<int> candidate_j {nums[0]};for (int k 1; k < n; k) {auto it_i upper_…

动态规划基础一>面试题 08.01. 三步问题

1.题目&#xff1a; 2.解析&#xff1a; 代码&#xff1a; public int waysToStep(int n) {/**1.创建dp表2.初始化3.填表4.返回值*/int MOD (int)1e9 7;//注意不能超出int范围&#xff0c;每做一次操作要取模//处理边界情况if(n 1 || n 2) return n;if(n 3) return 4;//1…

【Kubernetes】常见面试题汇总(五十七)

目录 125. K8S 创建服务 status 为 ErrlmagePull&#xff1f; 126.不能进入指定容器内部&#xff1f; 特别说明&#xff1a; 题目 1-68 属于【Kubernetes】的常规概念题&#xff0c;即 “ 汇总&#xff08;一&#xff09;~&#xff08;二十二&#xff09;” 。 题目 …

Django学习笔记二:数据库操作详解

Django框架提供了一个功能强大的ORM&#xff08;对象关系映射&#xff09;系统&#xff0c;使得开发者可以使用Python代码来操作数据库&#xff0c;而无需编写复杂的SQL语句。以下是Django数据库操作的一些基本概念和方法&#xff1a; 模型定义 在Django中&#xff0c;模型是…

两数相除(c语言)

1.//给你两个整数&#xff0c;被除数 dividend 和除数 divisor。将两数相除&#xff0c;要求 不使用 乘法、除法和取余运算。 //整数除法应该向零截断&#xff0c;也就是截去&#xff08;truncate&#xff09;其小数部分。 // 例如&#xff0c;8.345 将被截断为 8 &#xff0c;…

内网穿透工具ngrok

写作背景 最近在公司内购淘了个MAC电脑&#xff0c;想当个Linux服务器起Docker搭建环境用&#xff0c;现在问题是如何在公网上能访问到MAC这个机器上的资源。 之前写了一篇文章Mac当作云服务器&#xff0c;你真的会搞吗 最近想重启一下这台老伙计了&#xff0c;发现ngrok还是…

视频加字幕用什么软件最快?12款工具快速添加字幕!

对于大多数同学来讲&#xff0c;剪辑中比较头疼的就是如何给视频加字幕和唱词啦&#xff0c;特别是用Pr或者FCXP等专业剪辑软件&#xff0c;加字幕也是特别费时的&#xff0c;哪怕是有批量添加的功能orz... 虽然关于这方面的内容已经很多啦&#xff0c;但是真正全面的内容还特…

VTC视频时序控制器,TPG图像测试数据发生器,LCD驱动——FPGA学习笔记19

详情可以见LCD篇 LCD彩条显示——FPGA学习笔记10_依次显示红绿蓝三个通道-CSDN博客 一、VTC简介 Video Timing Controller 缩写 VTC 是我们在所有涉及 FPGA 图像、 FPGA 视频类方案中经常用到的一种用于产生视频时序的控制器。 本课以 VGA 为切入点&#xff0c; 学习视频传输…

[Linux]:线程(三)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;Linux学习 贝蒂的主页&#xff1a;Betty’s blog 1. POSIX 信号量 1.1 信号量的概念 为了解决多执行流访问临界区&#xff0c…

基于SpringBoot+Vue的酒店客房管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码、微信小程序源码 精品专栏&#xff1a;…

[SAP ABAP] 程序调用

示例数据 学生表(ZDBT_STU_437) 程序&#xff1a; Z437_TEST_20241006 代码如下所示 REPORT Z437_TEST_20241006.* 创建跟表或结构同名的工作区 TABLES: zdbt_stu_437.SELECTION-SCREEN BEGIN OF BLOCK b1 WITH FRAME TITLE TEXT-001.PARAMETERS: p_1 TYPE c LENGTH 4.SELECT-O…

Kali或Debian系统安装JDK1.8保姆级教程

一、下载JDK1.8 先到Oracle的官网下载JDK1.8 Java Archive | Oraclehttps://www.oracle.com/java/technologies/downloads/archive/Java Archive Downloads - Java SE 8