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,一经查实,立即删除!

相关文章

super与this

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

python作业 切片逆转

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

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

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

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

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

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…

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

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

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

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

Linux 第十一章

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

Java 图形化框架 - AWT、Swing

文章目录 关于 AWTAWT继承体系 关于 Swing关于 JFC 和 Swing Swing 组件组件层次Swing组件和AWT组件的对应关系&#xff1a;Swing组件按照功能来分类&#xff1a; Java使用AWT和Swing相关的类可以完成图形化界面编程&#xff0c;其中AWT的全称是抽象窗口工具集(Abstract Window…

北大发现了一种特殊类型的注意力头!

检索头的发现或许将有力地帮助大模型领域在提高长上下文推理能力、减少幻觉和压缩KV缓存方面的研究。 从 Claude100K 到 Gemini10M&#xff0c;我们正处于长上下文语言模型的时代。如何在长上下文中利用任何输入位置的信息&#xff1f;北大联合另外四所高校发现了一种特殊类型…

运维 kubernetes(k8s)基础学习

一、容器相关 1、发展历程&#xff1a;主机–虚拟机–容器 主机类似别墅的概念&#xff0c;一个地基上盖的房子只属于一个人家&#xff0c;很多房子会空出来&#xff0c;资源比较空闲浪费。 虚拟机类似楼房&#xff0c;一个地基上盖的楼房住着很多人家&#xff0c;相对主机模式…

微信小程序的开发

1.了解项目的基本组成结构 pages 用来存放所有小程序的页面 utils 用来存放工具性质的模块(例如:格式化时间的自定义模块) app.js 小程序项目的入口文件 app.json 小程序项目的全局配置文件 app.wxss 小程序项目的全局样式文件 project.config.json 项目的配置文件 sitem…

Docker基础学习(5.Docker镜像命令)

⭐ 作者简介&#xff1a;码上言 ⭐ 代表教程&#xff1a;Spring Boot vue-element 开发个人博客项目实战教程 ⭐专栏内容&#xff1a;个人博客系统 ⭐我的文档网站&#xff1a;http://xyhwh-nav.cn/ ⭐微信公众号&#xff1a;码上言 文章目录 Docker run流程镜像是什么&a…

通用视觉多模态大模型 一统理解/生成/分割/编辑

这是一款通用视觉多模态大模型&#xff0c;支持从视觉理解到视觉生成、从低层次到高层次的一系列视觉任务&#xff0c;解决了困扰大语言模型产业已久的图像/视频模型割裂问题&#xff0c;提供了一个全面统一静态图像与动态视频内容的理解、生成、分割、编辑等任务的像素级通用视…

C++必修:类与对象(一)

✨✨ 欢迎大家来到贝蒂大讲堂✨✨ &#x1f388;&#x1f388;养成好习惯&#xff0c;先赞后看哦~&#x1f388;&#x1f388; 所属专栏&#xff1a;C学习 贝蒂的主页&#xff1a;Betty’s blog 1. 面向过程与面向对象 1.1. 面向过程 我们之前学习的C语言就是一种面向过程的语…

【网络通信】初探网络层次结构(OSI七层网络模型)

随着信息技术的飞速发展&#xff0c;网络通信已经成为现代社会不可或缺的一部分。网络通信的实现离不开网络协议栈的支持&#xff0c;而网络协议栈则是由多个层次组成的。这些层次各自承担着不同的任务&#xff0c;共同构成了网络通信的基石。本文将对网络通信中的各类层进行详…

Swift - 函数

文章目录 Swift - 函数1. 函数的定义2. 隐式返回(Implicit Return)3. 返回元组&#xff1a;实现多返回值4. 函数的文档注释5. 参数标签&#xff08;Argument Label&#xff09;6. 默认参数值&#xff08;Default Parameter Value&#xff09;7. 可变参数&#xff08;Variadic P…

LM2576D2TR4-5G 3.0安15伏降压开关稳压器 PDF中文资料_参数_引脚图

LM2576D2TR4-5G 规格信息&#xff1a; 制造商:ON Semiconductor 产品种类:开关稳压器 RoHS:是 装置风格:SMD/SMT 封装 / 箱体:TO-263-5 输出电压:5 V 输出电流:3 A 输出端数量:1 Output 最大输入电压:45 V 拓扑结构:Buck 最小输入电压:7 V 开关频率:52 kHz 最小工作…

seq2seq架构略解

用于序列翻译任务&#xff08;下图来自d2l&#xff09; 训练时输入输出格式&#xff1a; 若数据集为{ <(a1,a2,a3,a4,a5),(b1,b2,b3,b4,b5)> }&#xff08;AB语言对应的句子组&#xff09; 输入 A语言的单词序列结束符&#xff08;a1,a2,a3,a4,a5,<eos>&#xf…

Unity类银河恶魔城学习记录14-5 p152 Lost currency save and enemy‘s currency drop

Alex教程每一P的教程原代码加上我自己的理解初步理解写的注释&#xff0c;可供学习Alex教程的人参考 此代码仅为较上一P有所改变的代码 【Unity教程】从0编程制作类银河恶魔城游戏_哔哩哔哩_bilibili LostCurrencyController.cs using System.Collections; using System.Colle…