输入两个数,可以进行加减乘除的操作。

news2024/10/1 1:26:42

完整代码如下所示:


<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>加减乘除的简单运算</title>
  <style>
    #operation {
      margin: 10px;
    }

    #box {
      width: 200px;
      height: 100px;
      text-align: center;
      font-size: 30px;
      border-radius: 10px;
      background-color: pink;
    }
  </style>
</head>

<body>
  <h1>请输入两个参加运算的整数</h1>
  <div style="margin-bottom: 10px;">
    <label for="oper1">操作数1:</label>
    <input type="text" name="oper1" id="oper1" placeholder="请输入第一个操作数">
  </div>
  <div>
    <label for="oper2">操作数2:</label>
    <input type="text" nama="oper2" id="oper2" placeholder="请输入第二个操作数">
  </div>
  <div id="operation">
    <button onclick="operationFn('+')">加法</button>
    <button onclick="operationFn('-')">减法</button>
    <button onclick="operationFn('*')">乘法</button>
    <button onclick="operationFn('/')">除法</button>
  </div>

  <div id="box">
  </div>
</body>
<script>

  var oper1 = document.getElementById("oper1")
  var oper2 = document.getElementById("oper2")
  var box = document.getElementById("box")
  function operationFn(type) {
    var x = parseInt(oper1.value);
    var y = parseInt(oper2.value);
    if (type === "+") {
      sum = x + y;
    } else if (type === "-") {
      sum = x - y;
    } else if (type === "*") {
      sum = x * y;
    } else if (type === "/") {
      sum = x / y;
    }
    box.innerHTML = sum;
  }

</script>

</html>

在这里插入图片描述

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

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

相关文章

博客系统 -- 静态页面

文章目录1. 前言2. 页面展示3. 实现3.1 博客列表页3.2 博客详情页3.3 登录页面3.4 博客编辑页4. 整体代码1. 前言 到此 我们对 HTML &#xff0c; CSS &#xff0c; JavaScript 已经有了个简单的了解 &#xff0c; 但是还不太熟悉 &#xff0c;下面就通过 写一个博客系统的 网站…

易优cms load 加载资源文件标签使用方法

【基础用法】 标签&#xff1a;load 描述&#xff1a;资源文件加载&#xff0c;比如&#xff1a;css/js 用法&#xff1a; {eyou:load href/static/js/common.js veron /} 属性&#xff1a; file 资源文件路径 href 远程资源文件URL ver 开启版本号自动刷新浏览器缓存 …

知著见微——读《战略与路径》

前几天刚读完《战略与路径&#xff1a;黄奇帆的十二堂经济课》&#xff0c;这本书是根据2020-2021年期间黄奇帆先生在复旦大学讲的12堂课编辑成书。放在前几年我是基本不怎么看这种讲宏观经济类的书&#xff0c;但近几年宏观的变化正以前所未有的方式展开&#xff0c;切切实实影…

让AI帮你工作(2)-如何阅读pdf论文

这个系列快结束了&#xff0c;后面会有一到两篇文章介绍&#xff0c;如何用AI实实在在的应用在工业生产研发&#xff0c;如何指导化工分子合成&#xff0c;如何做DNA的研究预测&#xff0c;合成。背景最近chatpdf在各媒体传的风风火火&#xff0c;从效果上是很震撼的。原因大概…

Linux内核Thermal框架详解一、总述

本文部分内容参考万字长文 | Thermal框架源码剖析&#xff0c;特此致谢&#xff01; Linux Thermal Framework是Linux系统下温度控制相关的一套架构&#xff0c;主要用来解决随着设备性能不断增强而引起的日益严重的发热问题&#xff0c;控制系统运行过程中各个器件所产生的热量…

【web前端开发】CSS最常用的11种选择器

文章目录1.CSS介绍2.CSS的语言规则3.CSS的引入方式4.选择器标签选择器类选择器id选择器通配符选择器复合选择器后代选择器子代选择器并集选择器交集选择器伪类选择器hover伪类选择器active伪类选择器结构伪类选择器结语1.CSS介绍 CSS (Cascading Style Sheets&#xff0c;层叠样…

分布式架构-流量治理-服务容错

系列目录 分布式架构-流量治理-服务容错 分布式架构-流量治理-流量控制 引子 容错性设计(Design for Failure)是微服务的一个核心原则。随着拆分出的服务越来越多&#xff0c;随之而来会面临以下两个问题的困扰&#xff1a; 由于某一个服务的崩溃&#xff0c;导致所有用到这个服…

MyBatis的基本使用

MyBatis 为啥MyBatis会使用xml 在一个程序中&#xff0c;若需要操作数据表&#xff0c;那么 SQL 语句有两种存放方式&#xff1a;1. 放到 Java 类里面&#xff08;这个就存在大量的字符串拼接&#xff0c;还有占位符需要处理-----JDBC&#xff09;&#xff1b;2&#xff1a;放…

TypeScript深度剖析: TypeScript 装饰器的理解?应用场景?

面试官&#xff1a;说说你对 TypeScript 装饰器的理解&#xff1f;应用场景&#xff1f; 一、是什么 装饰器是一种特殊类型的声明&#xff0c;它能够被附加到类声明&#xff0c;方法&#xff0c; 访问符&#xff0c;属性或参数上 是一种在不改变原类和使用继承的情况下&#…

程序员中的女性力量——做不被定义的自己

她是office lady&#xff0c;亦是程序媛&#xff0c;程序员界的靓丽色彩&#xff0c;不可或缺。 “只有那些疯狂到以为自己能够改变世界的人——才能真正改变世界。” 女性该如何定义自己&#xff1f;程序媛怎么发挥自己最大的价值。 争取自己做选择&#xff0c;经济和思想都独…

Spring基础与创建

目录 前言 Spring基础与核心概念 Spring是什么 1、什么是容器 2、什么是IoC 3、理解SpringIoC 4、DI&#xff08;依赖注入&#xff09; Spring的创建和使用 1、创建Spring项目 1.1、创建一个普通Maven项目 1.2、添加Spring框架支持 1.3、添加启动类和main方法 2、…

【c++】:STL模板中string的使用

文章目录 STL简介一.认识string二.string中基本功能的使用总结STL简介 STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架。STL的版本 原始版本 Alexand…

15_MySQL存储过程与存储函数

MySQL从5.0版本开始支持存储过程和函数。存储过程和函数能够将复杂的SQL逻辑封装在一起&#xff0c;应用程序无须关注存储过程和函数内部复杂的SQL逻辑&#xff0c;而只需要简单地调用存储过程和函数即可。1. 存储过程概述1.1 理解含义&#xff1a;存储过程的英文是 Stored Pro…

JDK8新特性宝典

JDK8新特性 ​ Java 是第一大编程语言和开发平台。它有助于企业降低成本、缩短开发周期、推动创新以及改善应用服务。如今全球有数百万开发人员运行着超过 51 亿个 Java 虚拟机&#xff0c;Java 仍是企业和开发人员的首选开发平台 课程内容的介绍 了解Java发展史Lambda表达式…

[深入理解SSD系列 闪存2.1.5] NAND FLASH基本读操作及原理_NAND FLASH Read Operation源码实现

前言 上面是我使用的NAND FLASH的硬件原理图,面对这些引脚,很难明白他们是什么含义, 下面先来个热身: 问1. 原理图上NAND FLASH只有数据线,怎么传输地址? 答1.在DATA0~DATA7上既传输数据,又传输地址 当ALE为高电平时传输的是地址, 问2. 从NAND FLASH芯片手册可知,要…

Apache DolphinScheduler GitHub Star 突破 10000!

点击蓝字 关注我们今天&#xff0c;Apache DolphinScheduler GitHub Star 突破 10000&#xff0c;项目迎来一个重要里程碑。这表明 Apache DolphinScheduler 已经在全球的开发者和用户中获得了广泛的认可和使用。DolphinScheduler 旨在解决公司日常运营中的大数据处理工作流调度…

Redis之持久化操作

目录 一、简介 二、RDB 1、自动触发 2、手动触发 3、RDB 的优点和缺点 三、AOF 1、AOF的工作流程 2、AOF的配置 3、AOF的优点和缺点 4、俩种持久化的方式如何选择&#xff1f; 一、简介 1、什么是持久化&#xff1f; 持久化是指将内存中的数据同步到磁盘中&#xf…

策略模式详解

文章目录策略模式&#xff08;行为模式&#xff09;1. 策略模式介绍2. 好处3. 场景案例4. 案例源码1. 代码结构2. 榜单服务接收消息入口3. 基础任务类4. 定义策略模式转发的规范5. 代理的第一层6. 代理的第二层抽象父类&#xff1a;定义视频聊榜单代理规范7. 代理的第二层实现子…

elasticsearch自定义企业词典

我们中文分词用的是ik&#xff0c;但是ik只是对基本的中文词进行了分词&#xff0c;而对于企业或者人名没有进行分词。比如&#xff0c;我搜索中国平安&#xff0c;那么ik只能分成中国、平安如果这样&#xff0c;这肯定是不行滴&#xff01;接下来&#xff0c;俺就教你&#xf…

历史上被发现的第一个真正的Bug - Grace Hopper

写在前面&#xff1a;博主是一只经过实战开发历练后投身培训事业的“小山猪”&#xff0c;昵称取自动画片《狮子王》中的“彭彭”&#xff0c;总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域&#xff0c;如今终有小成…