Web前端开发 小实训(二) 简易计算器

news2024/11/21 0:20:06

实训目的

学生能够使用函数完成简易计算器编写

操作步骤

1、请将加减乘除四个方法生成为以下函数,且有返回值

中文英语
加法add
减法subtract
乘法multi
除法division
次幂pow()
平方根sqrt()

提示: 除法中的除数不能为0!

参考代码:

function add(num1, num2) {
            return num1 + num2;
        }

function subtract(num1, num2) {
            return num1 - num2;
        }

function multi(num1, num2) {
            return num1 * num2;
        }

function division(num1, num2) {
            if (num2 == 0) {
                return "除数不能为0!";
            }
            return num1 / num2;
        }

function pow(num1, num2) {
            return Math.pow(num1, num2);
        }

function sqrt(num1) {
            return Math.sqrt(num1);
        }

2、使用分支语句,完成加减乘除的分类,参考如下

参考代码

function calc() {
            let choose_number = prompt("欢迎使用简易计算器!请输入你要使用的功能:\n按1进行加法;\n按2进行减法;\n按3进行乘法;\n按4进行除法;\n按5进行次幂,\n按6进行平方根计算;\n按其他数退出运算");
            let result = 0;
            let num1;
            let num2;
            switch (Number(choose_number)) {

                case 1:
                
                    break;
                case 2:
                  
                    break;
                case 3:
                    
                    break;
                case 4:
                  
                    break;
                case 5:
                    
                    break;
                case 6:
                   
                    break;
                default:
                    alert("计算结束,已退出...")
            }
        }

3、输入数字后进入到对应的功能

4、完成后输出结果

步骤3-4参考代码

switch (Number(choose_number)) {

                case 1:
                    num1 = Number(prompt("开始进行加法\n请输入第一个数"));
                    num2 = Number(prompt("请输入第二个数"));
                    result = add(num1, num2);
                    alert("你的计算结果为:" + result);
                   
                    break;
                case 2:
                    num1 = Number(prompt("开始进行减法\n请输入第一个数"));
                    num2 = Number(prompt("请输入第二个数"));
                    result = subtract(num1, num2);
                    alert("你的计算结果为:" + result);
                    isNext();
                    break;
                case 3:
                    num1 = Number(prompt("开始进行乘法\n请输入第一个数"));
                    num2 = Number(prompt("请输入第二个数"));
                    result = multi(num1, num2);
                    alert("你的计算结果为:" + result);
                  
                    break;
                case 4:
                    num1 = Number(prompt("开始进行除法\n请输入第一个数"));
                    num2 = Number(prompt("请输入第二个数"));
                    result = division(num1, num2);
                    alert("你的计算结果为:" + result);
                   
                    break;
                case 5:
                    num1 = Number(prompt("开始进行次幂\n请输入第一个数"));
                    num2 = Number(prompt("请输入第二个数"));
                    result = pow(num1, num2);
                    alert("你的计算结果为:" + result);
                   
                    break;
                case 6:
                    num1 = Number(prompt("开始进行求根\n请输入"));
                    result = sqrt(num1,);
                    alert("你的计算结果为:" + result);
                    break;

5、如果是其他数字,则退出

  default:
     alert("计算结束,已退出...")

6、正常计算结果后,提示是否继续计算,如果继续,则回到步骤1,取消结束计算

 function isNext() {
            let result = confirm("还需要继续计算吗?")
            if (result) {
                calc();
            }else{
                alert("感谢您的使用!")
            }
        }

申明方法后,在每个分支后调用

      case 1:
      num1 = parseFloat(prompt("开始进行加法\n请输入第一个数"));
                    num2 = parseFloat(prompt("请输入第二个数"));
                    result = add(num1, num2);
                    alert("你的计算结果为:" + result);
                    isNext();//继续调用
                    break;
     case 2:
                    num1 = parseFloat(prompt("开始进行减法\n请输入第一个数"));
                    num2 = parseFloat(prompt("请输入第二个数"));
                    result = subtract(num1, num2);
                    alert("你的计算结果为:" + result);
                    isNext();
                    break;
      //......              

最后直接调用运行页面

 //开始调用
calc();

完整代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>

        function add(num1, num2) {
            return num1 + num2;
        }

        function subtract(num1, num2) {
            return num1 - num2;
        }

        function multi(num1, num2) {
            return num1 * num2;
        }

        function division(num1, num2) {
            if (num2 == 0) {
                return "除数不能为0!";
            }
            return num1 / num2;
        }

        function pow(num1, num2) {
            return Math.pow(num1, num2);
        }

        function sqrt(num1) {
            return Math.sqrt(num1);
        }

        function isNext() {
            let result = confirm("还需要继续计算吗?")
            if (result) {
                calc();
            }else{
                alert("感谢您的使用!")
            }
        }

        function calc() {
            let choose_number = prompt("欢迎使用简易计算器!请输入你要使用的功能:\n按1进行加法;\n按2进行减法;\n按3进行乘法;\n按4进行除法;\n按5进行次幂,\n按6进行平方根计算;\n按其他数退出运算");
            let result = 0;
            let num1;
            let num2;
            switch (Number(choose_number)) {

                case 1:
                    num1 = Number(prompt("开始进行加法\n请输入第一个数"));
                    num2 = Number(prompt("请输入第二个数"));
                    result = add(num1, num2);
                    alert("你的计算结果为:" + result);
                    isNext();
                    break;
                case 2:
                    num1 = Number(prompt("开始进行减法\n请输入第一个数"));
                    num2 = Number(prompt("请输入第二个数"));
                    result = subtract(num1, num2);
                    alert("你的计算结果为:" + result);
                    isNext();
                    break;
                case 3:
                    num1 = Number(prompt("开始进行乘法\n请输入第一个数"));
                    num2 = Number(prompt("请输入第二个数"));
                    result = multi(num1, num2);
                    alert("你的计算结果为:" + result);
                    isNext();
                    break;
                case 4:
                    num1 = Number(prompt("开始进行除法\n请输入第一个数"));
                    num2 = Number(prompt("请输入第二个数"));
                    result = division(num1, num2);
                    alert("你的计算结果为:" + result);
                    isNext();
                    break;
                case 5:
                    num1 = Number(prompt("开始进行次幂\n请输入第一个数"));
                    num2 = Number(prompt("请输入第二个数"));
                    result = pow(num1, num2);
                    alert("你的计算结果为:" + result);
                    isNext();
                    break;
                case 6:
                    num1 = Number(prompt("开始进行求根\n请输入第一个数"));
                    result = sqrt(num1,);
                    alert("你的计算结果为:" + result);
                    isNext();
                    break;
                default:
                    alert("计算结束,已退出...")
            }
        }

        //开始调用
        calc();
    </script>

</body>

</html>

因面向的是初学Web前端课程的学生,因此代码可能有一些逻辑问题。

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

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

相关文章

OpenHarmony实战开发-动画概述

UI&#xff08;用户界面&#xff09;中包含开发者与设备进行交互时所看到的各种组件&#xff08;如时间、壁纸等&#xff09;。属性作为接口&#xff0c;用于控制组件的行为。例如&#xff0c;开发者可通过位置属性调整组件在屏幕上的位置。 属性值的变化&#xff0c;通常会引…

python作业 切片逆转

题目&#xff1a; &#xff08;反转显示一个整数&#xff09;编写下面的函数&#xff0c;反向显示一个整数。 列如&#xff1a;reserse(3456)。编写一个测试程序&#xff0c;提示用户输入一个整数&#xff0c;然后显示它的反向数。 第一步定义一个函数&#xff1a; def rev…

Docker容器部署overleaf

overleaf在线版限制很多&#xff0c;好在开源&#xff0c;准备在本地Docker部署&#xff0c;网上翻了翻&#xff0c;似乎本地部署并非易事&#xff0c;我也尝试了一下&#xff0c;发现直接使用docker-compose拉官方最新镜像部署的确问题很多&#xff0c;不过最终还是完美解决。…

前端学习<四>JavaScript——54-原型链

常见概念 构造函数 构造函数-扩展 原型规则和示例 原型链 instanceof 构造函数 任何一个函数都可以被 new&#xff0c;new 了之后&#xff0c;就成了构造方法。 如下&#xff1a; function Foo(name, age) {this.name name;this.age age;//retrun this; //默认有这…

系统思考—高效激励和沟通艺术

前两天结束建工集团的下属公司《高效激励和沟通艺术》的课程&#xff0c;不仅讨论了一些实用的管理技巧&#xff0c;更多的是从系统思考的视角&#xff0c;探讨了“结构如何影响行为”。这种方法让我们认识到系统力量的重要性&#xff0c;并且通过理解这些力量&#xff0c;我们…

武汉星起航:亚马逊助力中国卖家扬帆全球,共筑跨境电商新篇章

自1995年7月诞生以来&#xff0c;亚马逊以其前瞻性的视野和不懈的创新精神&#xff0c;迅速崛起为全球电商领域的领军者。总部设在美国西雅图的亚马逊&#xff0c;以其卓越的技术实力、丰富的商品资源和优质的服务体验&#xff0c;赢得了全球消费者的广泛认可。 随着全球化的加…

数据结构 - 队列 [动画+代码注释超详解],萌新轻松上手!!!

一. 队列的概念 队列是一种特殊的线性表&#xff0c;用于存储元素&#xff0c;并且按照先进先出(First In First Out)的顺序进行管理&#xff0c;这意味着最先加入队列的元素将会是最先从队列中被移除的元素 队列的原型&#xff1a;只允许在一端进行插入数据的操作&#xff0c…

ArcGIS Pro 和 Python — 分析全球主要城市中心的土地覆盖变化

第一步——设置工作环境 1–0. 地理数据库 在下载任何数据之前,我将创建几个地理数据库,在其中保存和存储所有数据以及我将创建的后续图层。将为我要分析的五个城市中的每一个创建一个地理数据库,并将其命名为: “Phoenix.gdb” “Singapore.gdb” “Berlin.gdb” “B…

入户厨房设计,220大平层现代风三室装修。福州中宅装饰,福州装修

设计亮点 220㎡的平层住宅需要在氛围、功能和储物空间方面进行质的提升&#xff0c;以满足三口之家的需求。原始结构包括五个卧室和两个客厅&#xff0c;客餐厅整体通透&#xff0c;但厨房稍显局促&#xff0c;主卧功能分区不够清晰。 入户厨房 设计亮点 这个充满现代氛围的入…

SpringBoot---------Hutool

第一步&#xff1a;引入依赖 <dependency><groupId>cn.hutool</groupId><artifactId>hutool-parent</artifactId><version>5.7.17</version></dependency> 第二步&#xff1a;各种用法 ①生成随机数 //生成验证码 String s …

29.Gateway网关的全局过滤器GlobalFilter

全局过滤器的作用也是处理一切进入网关的请求和微服务响应。 与GatewayFilter的作用一样(filters, default-filters) 区别 GatewayFilter通过配置定义&#xff0c;处理逻辑是固定的。 GlobalFilter的逻辑需要自己写代码实现&#xff0c;可以自定义。 exchange表示 请求上下…

EXCEL表格中的数字,为什么每次打开会自动变成日期?

一、典型现象 在工作中&#xff0c;有时会发现公司里的报表&#xff0c;经过多人多次的重复的使用和修改后&#xff0c;会出现这种情况&#xff1a; 1.在表格里按照需要输入数字&#xff0c;保存工作簿。 2.然而&#xff0c;再次打开工作簿&#xff0c;里面的数字变成日期&a…

【嵌入式AI开发】轻量级卷积神经网络MobileNetV2详解

前言:MobileNetV2网络先升维后降维,在降维时使用线性激活函数,带残差的Inverted bottleck模块,防止ReLU信息丢失。在图像分类、目标检测、语义分割等任务上实现了网络轻量化、速度和准确度的权衡。 回顾MobileNetV1的理论和MobileNetV2项目实战可查阅如下链接: 【嵌入式AI…

【前端开发基础知识快速入门】

前端开发基础知识&快速入门 一、VSCode 使用1.1 安装常用插件1.2 创建项目1.3 创建网页1.4 运行效果二、ES62.1 简介2.2 什么是 ECMAScript2.3 ES6 新特性2.3.1 let 声明变量2.3.2 const 声明常量(只读变量)2.3.3 解构表达式2.3.4 字符串扩展2.3.5 函数优化2.3.6 对象优化…

ADM2483BRWZ 封装SOIC-16-300mil 隔离器芯片

ADM 2483 BRWZ 是一款由Analog Devices&#xff08;模拟器件公司&#xff09;生产的隔离式RS-485差分总线收发器。以下是ADM 2483 BRWZ的一些主要功能和参数介绍&#xff1a; 主要功能&#xff1a; 隔离通信: 提供电气隔离&#xff0c;以保护敏感的电子设备免受噪声干扰和高压…

nvm基本使用

nvm基本使用 文章目录 nvm基本使用1.基本介绍2.下载地址3.常用指令 1.基本介绍 NVM是一个用于管理 Node.js 版本的工具。它允许您在同一台计算机上同时安装和管理多个 Node.js 版本&#xff0c;针对于不同的项目可能需要不同版本的 Node.js 运行环境。 NVM 主要功能&#xff…

鸿蒙OpenHarmony【小型系统 编译】(基于Hi3516开发板)

编译 OpenHarmony支持hb和build.sh两种编译方式。此处介绍hb方式&#xff0c;build.sh脚本编译方式请参考[使用build.sh脚本编译源码]。 使用build.sh脚本编译源码 进入源码根目录&#xff0c;执行如下命令进行版本编译。 ./build.sh --product-name name --ccache 说明&…

探讨成为程序员后的收获和体会,以及对未来的展望。

成为程序员后的收获与体会&#xff1a;探索与成长的旅程 自从我踏入程序员这一行业&#xff0c;我的生活和思维方式都发生了巨大的变化。这不仅仅是因为我掌握了一种新的技能&#xff0c;更因为我开启了一段探索与成长的旅程。 首先&#xff0c;成为程序员让我深刻体会到了技…

U盘格式转换GPT格式转回DOS

当前格式 fdisk /dev/sdb# 在 fdisk 提示符下&#xff0c;输入以下命令删除分区&#xff1a; d # 选择要删除的分区编号&#xff08;如 1、2 等&#xff09; w开始转换 [rootnode-24 ~]# fdisk /dev/sdbWelcome to fdisk (util-linux 2.37.4). Changes will remain in memory o…

服务案例|服务器批量重启

告警产生 4月16日上午7:30分左右&#xff0c;福州某市医院20多台服务器批量重启&#xff0c;通知现场工程师。 故障分析定位 1、通过批量重启告警信息&#xff0c;发现内网esxi53主机硬件告警&#xff0c;初步判断是X86设备esxi53发生故障&#xff0c;导致esxi53上的虚拟服务…