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

实训目的

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

操作步骤

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.mzph.cn/diannao/4159.shtml

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

相关文章

Web 服务器(一)

一、Web 服务器介绍 1、WEB服务简介 目前最主流的三个Web服务器是Apache、Nginx、 IIS。 Web服务器一般指网站服务器&#xff0c;是指驻留于因特网上某种类型计算机的程序&#xff0c;可以向浏览器等 Web客户端提供文档&#xff0c;也可以放置网站文件&#xff0c;让全世界浏览…

ES6 Module 的加载实现,浏览器加载,ES6 模块与 CommonJS 模块具体解析(2024-04-23)

目录 1、浏览器加载 1.2 加载规则 1.3 ES6 模块与 CommonJS 模块的差异 2、Node.js 的模块加载方法 2.1 概述 2.1.1 package.json 的 main 字段 2.1.2 package.json 的 exports 字段 &#xff08;1&#xff09;子目录别名 &#xff08;2&#xff09;main 的别名 &…

super与this

目录 原型链与继承继承中的原型链 classsuper与this 我们可能会对一个问题感到好奇&#xff1a;为什么在派生类中&#xff0c;我们需要在调用this之前调用super。我们通常将其视为一种规范&#xff0c;却很少深入探究这个规范的真正意义。许多人认为super不过是ES6之前继承方式…

python作业 切片逆转

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

Django——Auth模块以及admin站点

Django——Auth模块 一、Auth 模块 Auth 用户认证&#xff0c;本质上也是设置 Session。 Django 认证系统同时处理认证和授权认证&#xff1a;验证一个用户是否为 django 声明的用户&#xff0c;如果是可以进行登录授权&#xff1a;决定一个已经验证的用户有哪些功能是允许操…

Python3操作redis百万级数据迁移,单机到单机,集群到集群

Python3操作redis大量数据迁移 脚本 背景使用前使用注意事项脚本总结 背景 之前写过一个用python迁移redis的脚本&#xff0c;但是对于小批量的数据、单节点的&#xff0c;还可以用。对于大量数据&#xff0c;集群模式的就不太适合了。所以写了下面的脚本&#xff0c;而且做了…

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

前端开发基础知识&快速入门 一、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 对象优化…

Ubuntu中apt更新时报错The certificate issuer is unknown的解决办法

Ubuntu 22.04更新apt出现The certificate issuer is unknown的解决办法 问题描述解决办法讨论 问题描述 使用docker安装Ubuntu22.04&#xff0c;官网给出的镜像只是一个裸系统&#xff0c;预装软件很少。换阿里源以后&#xff0c;apt update&#xff0c;出现如下报错&#xff…

【C语言】动态内存分配(一)

目录 1.为什么要有动态内存分配 2.malloc和free 2.1malloc 2.2free 1.为什么要有动态内存分配 我们已经掌握的内存开辟方式有: 但是上述的开辟空间的方式有两个特点: ⭐空间开辟大小是固定的。 ⭐数组在申明的时候&#xff0c;必须指定数组的长度&#xff0c;数组空间一旦…

GateWay具体的使用之全局token过滤器

1: 创建过滤器类 首先&#xff0c;你需要创建一个实现了GatewayFilter接口或者继承AbstractGatewayFilterFactory类的过滤器类。这里以实现GatewayFilter接口为例&#xff0c;创建一个全局token过滤器。 package com.by.filter;import cn.hutool.core.collection.CollUtil; imp…

SQL提升

1. SQL TOP 子句 TOP 子句用于规定要返回的记录的数目。 对于拥有数千条记录的大型表来说&#xff0c;TOP 子句是非常有用的。 **注释&#xff1a;**并非所有的数据库系统都支持 TOP 子句。 1.1 SQL TOP 语法 SQL Server 的语法&#xff1a; SELECT TOP number|percent c…

OpenCV C++实现区域面积筛选以及统计区域个数

目录 1、背景介绍 2、代码实现 2.1 获取原图 2.1.1 区域图像imread 2.1.2 具体实现 2.2 获取图像大小 2.3 阈值分割 2.3.1 阈值分割threshold 2.3.2 具体实现 2.4 区域面积筛选 2.4.1 获取轮廓findContours 2.4.2 获取轮廓面积contourArea 2.4.3 填充区域fil…

http请求与响应

目录 HTTP请求格式 HTTP响应格式 HTTP请求格式 请求行&#xff1a;请求数据第一行(请求方式&#xff0c;资源路径&#xff0c;协议) 请求头&#xff1a;第二行开始&#xff0c;格式key:value 请求体&#xff1a;POST请求&#xff0c;存放在请求参数 非restful方式&#xff1…

浅谈大数据时代下的电商风控||电商数据API接口

抢抢抢&#xff01;最后1天&#xff0c;双十一直播活动来啦&#xff01;抢直播专属优惠…… 视频号 随着大数据时代的兴起&#xff0c;互联网电商风控已经从无风控、人工抽取规则为主的简易规则模型发展到当前基于大数据的风控。与金融风控不同&#xff0c;互联网电商风控呈现出…

详解MyBatis配置文件开发与注解式开发

首先呢&#xff0c;五一快来啦&#xff01;提前祝各位宝子们五一玩得开心&#xff0c;然后讲解一下MyBatis框架呀!!! 一.框架介绍 MyBatis 的主要特点 二.MyBatis工作流程 1. 初始化和配置 2. 创建 SqlSessionFactory 3. 获取 SqlSession 4. 映射器绑定 5. 执行操作 6.…

力扣1518. 换水问题

题目链接 力扣1518. 换水问题 简单方法(模拟) 思路 对换水进行模拟&#xff0c;每次喝完 n u m E x c h a n g e numExchange numExchange 瓶水后就去换一瓶水&#xff0c;直到不能再兑换为止&#xff0c;也就是剩余水的数量小于 n u m E x c h a n g e numExchange numE…

vscode中jsconfig.json文件首行提示错误

在使用react框架开发前端时&#xff0c;文件jsconfig.json首行提示错误&#xff0c;打开设置&#xff0c;勾选如下图这项

jupyter lab 如何安装和启动

Jupyter Lab 是一种基于 web 的交互式开发环境&#xff0c;用于 Jupyter 笔记本。与传统的 Jupyter 笔记本相比&#xff0c;它提供了更友好、更可扩展的界面&#xff0c;具有代码单元格、markdown 单元格、小部件和文件浏览器等功能。 1.安装 Jupyter Lab: 打开终端或命令提示…

【Go】通道作为函数参数

目录 一、Pings Pongs例子程序 二、使用通道进行任务分配和结果收集 三、使用通道进行错误处理 四、使用通道实现速率限制 五、使用通道进行数据同步 总结 共性 解决的问题类型 实际应用示例 Go 语言中&#xff0c;通道&#xff08;channel&#xff09;是实现协程&…

Linux 第十一章

&#x1f436;博主主页&#xff1a;ᰔᩚ. 一怀明月ꦿ ❤️‍&#x1f525;专栏系列&#xff1a;线性代数&#xff0c;C初学者入门训练&#xff0c;题解C&#xff0c;C的使用文章&#xff0c;「初学」C&#xff0c;linux &#x1f525;座右铭&#xff1a;“不要等到什么都没有了…