JS小项目-计算器

需求:根据素材制作如图所示页面,在页面输入第一个数和第二个数,单击+(加)、-(减)、*(乘)、/(除)按钮时,实现两个数的相应运算在这里插入图片描述

Code

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Calculator</title><style>.btn-spacing {margin-right: 24px;/* 可以根据需要调整间距 */}button {width: 40px;height: 20px;}</style>
</head><body><!-- 输入框用于输入两个数字 --><label for="num1">第一个数 </label><input type="number" id="num1"><br><br><label for="num2">第二个数 </label><input type="number" id="num2"><br><br><!-- 按钮用于执行加法、减法、乘法和除法运算 --><button onclick="add()" class="btn-spacing">+</button><button onclick="subtract()" class="btn-spacing">-</button><button onclick="multiply()" class="btn-spacing">*</button><button onclick="divide()">/</button><br><br><!-- 显示结果的文本框 --><label for="result">计算结果 </label><input type="text" id="result" readonly><script>// 加法函数function add() {var num1 = parseFloat(document.getElementById("num1").value);var num2 = parseFloat(document.getElementById("num2").value);var result = num1 + num2;document.getElementById("result").value = result;}// 减法函数function subtract() {var num1 = parseFloat(document.getElementById("num1").value);var num2 = parseFloat(document.getElementById("num2").value);var result = num1 - num2;document.getElementById("result").value = result;}// 乘法函数function multiply() {var num1 = parseFloat(document.getElementById("num1").value);var num2 = parseFloat(document.getElementById("num2").value);var result = num1 * num2;document.getElementById("result").value = result;}// 除法函数function divide() {var num1 = parseFloat(document.getElementById("num1").value);var num2 = parseFloat(document.getElementById("num2").value);if (num2 === 0) {document.getElementById("result").value = "Cannot divide by zero!";} else {var result = num1 / num2;document.getElementById("result").value = result;}}</script></body></html>

效果

在这里插入图片描述

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

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

相关文章

Your file appears not to be a valid OLE2 document

前言 org.apache.poi.poifs.filesystem.NotOLE2FileException:Invalid header signature; read 0x0000000000000000, expected 0xE11AB1A1E011CFD0 - Your file appears not to be a valid OLE2 document解决 Excel兼容模式打开老版本文件造成文件损坏&#xff0c;大多说的是点…

vscode-tasks.json自定义任务

以下所有内容,参考自VScode官方文档: vscode_tasks-docs任务说明文档vscode_variables-reference-docs变量说明文档vscode addtional docs for tasksvscode launch.json 属性设置文档,(下文没有介绍,没有涉及) 浅浅记录一下个人对vscode任务(task)的理解,还谈不上使用. 文章目…

linux通配符

通配符&#xff0c;它是一种用于匹配文件名的特殊字符。通配符在Linux中可以帮助我们更加方便和快捷地查找和操作文件。

IDEA new ui 找不到evaluate

问题 idea升级新版本之后&#xff0c;发现熟悉的evaluate不见了&#xff0c;只能通过快捷键启动&#xff0c;未免太麻烦了&#xff0c;如何像旧版一样添加图标直接点呢&#xff1f; 解决方案 打开debug窗口&#xff0c;在这个地方右键&#xff0c;然后选择add actions 搜索…

Mysql底层原理四:B+树索引

B树索引&#xff08;索引的原理&#xff09; 1.前言 前边我们详细唠叨了InnoDB数据⻚的7个组成部分&#xff0c;知道了各个数据⻚可以组成⼀个双向链表&#xff0c;⽽每个数据⻚中的记录会按照主键值从⼩到⼤的顺序组成⼀个单向链 表&#xff0c;每个数据⻚都会为存储在它⾥边…

【Web】纯萌新的CISCN刷题记录(1)

目录 [CISCN 2019华东南]Web11 [CISCN 2019华北Day2]Web1 [CISCN 2019初赛]Love Math [CISCN 2022 初赛]ezpop [CISCN 2019华东南]Double Secret [CISCN 2023 华北]ez_date [CISCN 2019华北Day1]Web1 [CISCN 2019华东南]Web4 [CISCN 2019华北Day1]Web2 [CISCN 2023 …

解决电脑无故自动关机或重启的15种方法,总有一种适合你

序言 你的Windows PC是否在没有警告的情况下关闭或重新启动?这背后有几个潜在的原因。例如,它可能是软件/硬件冲突、过热或硬盘驱动器错误。本故障排除指南将概述在Windows 10/11中修复自动关闭和重新启动的多个解决方案。 如果你的计算机经常关闭,则必须在安全模式下启动…

JMeter 常见函数讲解

当使用JMeter进行性能测试或负载测试时&#xff0c;函数是一个非常有用的工具&#xff0c;可以帮助生成动态的测试数据或处理测试结果。 下面是一些常用的JMeter函数的详细讲解和并列示例&#xff1a; 1、__threadNum&#xff1a; 返回当前线程的编号。可以在测试过程中用于…

2024/4/1—力扣—主要元素

代码实现&#xff1a; 思路&#xff1a;摩尔投票算法 int majorityElement(int *nums, int numsSize) {int candidate -1;int count 0;for (int i 0; i < numsSize; i) {if (count 0) {candidate nums[i];}if (nums[i] candidate) {count;} else {count--;}}count 0;…

静态中间继电器 HJZ-J908 AC380V 导轨安装 JOSEF约瑟

系列型号&#xff1a; HJZ-J902静态中间继电器&#xff1b;HJZ-J905静态中间继电器&#xff1b; HJZ-J907静态中间继电器&#xff1b;HJZ-J907L静态中间继电器&#xff1b; HJZ-J908静态中间继电器&#xff1b;HJZ-J909静态中间继电器&#xff1b; HJZ-J910静态中间继电器&…

SpringCloud学习(12)-SpringCloudAlibaba-Sentinel

Sentinel介绍 Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维度来帮助开发者保障微服务的稳定性。 官网 home | Sentinel 下载…

python应用-计算两个日期的时间差

学习目录 1. 安装deteutil包 2. 导入relativedelta类 3. 计算两个日期的差值 4. 计算1个日期和时间差相加后得到新的日期 之前在工作中遇到一个使用场景&#xff1a;需要计算两个日期之前的差值&#xff0c;比如相差了几年几月几日&#xff0c;查找资料发现deteutil包的rel…

从用友U9到钉钉通过接口配置打通数据

从用友U9到钉钉通过接口配置打通数据 接通系统&#xff1a;用友U9 用友U9cloud深耕制造领域十三载&#xff0c;U9cloud在机械、电子、汽配、家具、整车、军工等细分行业有着深厚的积累&#xff0c;尤其是机械、电子和汽配行业&#xff0c;不但打造了多个成熟的产品模式和应用场…

【频繁模式挖掘】FP-Tree算法(附Python实现)

一、实验内容简介 该实验主要使用频繁模式和关联规则进行数据挖掘&#xff0c;在已经使用过Apriori算法挖掘频繁模式后&#xff0c;这次使用FP-tree算法来编写和设计程序&#xff0c;依然使用不同规模的数据集来检验效果&#xff0c;最后分析和探讨实验结果&#xff0c;看其是…

初学python记录:力扣2009. 使数组连续的最少操作数

题目&#xff1a; 给你一个整数数组 nums 。每一次操作中&#xff0c;你可以将 nums 中 任意 一个元素替换成 任意 整数。 如果 nums 满足以下条件&#xff0c;那么它是 连续的 &#xff1a; nums 中所有元素都是 互不相同 的。nums 中 最大 元素与 最小 元素的差等于 nums.…

C# Solidworks二次开发:向量相关的数学函数API使用(第二讲)

大家好&#xff0c;今天要讲的是关于向量相关的API&#xff0c;之前讲的不再进行介绍&#xff0c;想了解的可以看我之前的文章&#xff1a; C# Solidworks二次开发&#xff1a;向量相关的数学函数API的使用介绍_solidworks二次开发中矩阵变换函数-CSDN博客下面介绍向量其它的相…

C# Solidworks二次开发:涉及主框架相关API详解(第二讲)

大家好&#xff0c;今天要介绍的是和主框架Frame相关的几个API&#xff0c;之前我也在一篇文章中提过一些&#xff0c;没看过的家人可以看一下&#xff1a; C# Solidworks二次开发&#xff1a;获取主窗口API和创建新活动窗口API详解_solidworks二次开发c#-CSDN博客 下面介绍一…

【C++初阶】第九站:vector的介绍及使用

前言&#xff1a; &#x1f3af;个人博客&#xff1a;Dream_Chaser &#x1f388;博客专栏&#xff1a;C &#x1f4da;本篇内容&#xff1a;vector的介绍及使用 ​ 目录 一、vector的介绍 二、vector的使用 1.vector的定义 2.vector iterator(迭代器)的使用 begin和end(…

Spring Boot:数据库的整合

Spring Boot 前言Spring Boot 整合 JDBCSpring Boot 整合 Druid 数据源Spring Boot 整合 MyBatisSpring Boot 整合 JPA 前言 在 Spring Boot &#xff1a;Web开发之视图模板技术的整合 文章中&#xff0c;介绍了 Spring Boot 整合视图模板技术。然而&#xff0c;仅仅整合视图模…

.net框架和c#程序设计第二次测试

一、实验内容 1、设计一个用户登录页面webform1.aspx&#xff0c;效果如下图所示&#xff1a; 2、点击webform1.aspx中“还未注册”连接进入register.aspx&#xff0c;注册页面效果如下图所示&#xff1a;点击用户注册信息到usershow.aspx页面&#xff0c;并显示注册的用户信息…