JavaScript 用三种方法做一个简易计算器

最新推荐文章于 2024-03-19 04:00:12 发布
最新推荐文章于 2024-03-19 04:00:12 发布
阅读量7.3k 收藏 55
点赞数 16
文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_62496369/article/details/127440282
版权

JavaScript 用三种方法做一个简易计算器


基本数据类型 / 使用对象创建

1.普通使用

<!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>
		var str = '欢迎使用简易计算器:\n1. 加法运算;\n2. 减法运算;\n3. 乘法运算;\n4. 除法运算;\n5. 退出:\n请输入您的选项';
		var option = parseInt(prompt(str))
		switch (option) {
			case 1:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				alert(str1 + str2)
				console.log("加法运算");
				break
			case 2:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				alert(str1 - str2)
				console.log("减法运算");
				break
			case 3:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				alert(str1 * str2)
				console.log("乘法运算");
				break
			case 4:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				alert(str1 / str2)
				console.log("除法运算");
				break
			case 5:
				console.log("退出");
				break
		}

	</script>
</body>

</html>

2.创建基本函数

<!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 jiafa(num1, num2) {
			return num1 + num2
		}
		function jianfa(num1, num2) {
			return num1 - num2
		}
		function chengfa(num1, num2) {
			return num1 * num2
		}
		function chufa(num1, num2) {
			return num1 / num2
		}
		var str = '欢迎使用简易计算器:\n1. 加法运算;\n2. 减法运算;\n3. 乘法运算;\n4. 除法运算;\n5. 退出:\n请输入您的选项';
		var option = parseInt(prompt(str))
		switch (option) {
			case 1:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				result = jiafa(str1, str2)
				alert(result)
				console.log("加法运算");
				break
			case 2:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				result = jianfa(str1, str2)
				alert(result)
				console.log("减法运算");
				break
			case 3:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				result = chengfa(str1, str2)
				alert(result)
				console.log("乘法运算");
				break
			case 4:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				result = chufa(str1, str2)
				alert(result)
				console.log("除法运算");
				break
			case 5:
				console.log("退出");
				break
		}

	</script>
</body>

</html>

3.构造函数创建

new关键字执行过程
// 1.new构造函可以在内存中创建了一个空的对象
// 2.this就会指向刚才创建的空对象
// 3.执行构造函数里面的代码 给这个空对象添加属性和方法
// 4.返回这个新对象(所以构造函数里面不需要return)

<!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 Counter(num1, num2) {
			this.num1 = num1
			this.num2 = num2
			this.jiafa = function () {
				return num1 + num2
			}
			this.jianfa = function () {
				return num1 - num2
			}
			this.chengfa = function () {
				return num1 * num2
			}
			this.chufa = function () {
				return num1 / num2
			}
		}

		var str = '欢迎使用简易计算器:\n1. 加法运算;\n2. 减法运算;\n3. 乘法运算;\n4. 除法运算;\n5. 退出:\n请输入您的选项';
		var option = parseInt(prompt(str))
		switch (option) {
			case 1:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				result = new Counter(str1, str2).jiafa()
				alert(result)
				console.log("加法运算");
				break
			case 2:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				result = new Counter(str1, str2).jianfa()
				alert(result)
				console.log("减法运算");
				break
			case 3:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				result = new Counter(str1, str2).chengfa()
				alert(result)
				console.log("乘法运算");
				break
			case 4:
				var str1 = parseInt(prompt("请输入第一个数"))
				var str2 = parseInt(prompt("请输入第二个数"))
				result = new Counter(str1, str2).chufa()
				alert(result)
				console.log("除法运算");
				break
			case 5:
				console.log("退出");
				break
			default:
				console.log("输入错误")
				break
		}

	</script>
</body>

</html>

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述

Lineason
关注
  • 16
    点赞
  • 踩
  • 55
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript实现简易计算器小功能
01-21
本文实例为大家分享了JavaScript实现简易计算器的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>计算器</title> </head> <body> <!--页面布局--> <input type=text id=num1 placeholder=请输入第一个数字/> <input type=text id=operator placeholder=请输入运算符> <input type=text id=num2 pl
js编写简易的计算器
12-28
本文实例为大家分享了js编写简易计算器的具体代码，供大家参考，具体内容如下 使用绑定时间触发 加减乘除 加： 减： 乘： 除： 源代码： <body> 第一个数：<input type=text id=num1 /><p></p> <div id=ss> <button type=button >+</button> <button type=button >-</button> <button type=button >*</button> <button type=button >/</button> </div> <p></p> 第
JavaScript制作简易版计算器——求任意两个数的和差积商取余
最新发布
2201_75604341的博客
03-19 332
注意：1】var是一个JS关键字，用来声明变量（variable变量的意思）。使用该关键字声明变量后，计算机会自动为变量分配内存空间，不需要程序员管2】age是程序员定义的变量名，我们要通过变量名来访问内存中分配的空间//给变量赋值age = 10;//给age这个变量赋值为10注意：1】=用来把右边的值赋给左边的变量空间中 此处代表赋值的意思2】变量值是程序员保存到变量空间里的值//变量初始化//声明变量同时赋值为19。
JavaScript实现简易计算器
weixin_46379561的博客
09-06 598
完成样式 完成样式如图，计算器支持一般的加减乘除。 C：清屏 <-：退格 +/-：正负转换 H：历史记录（暂未完善） 实现函数和界面 此计算器中不包括历史记录，需要实现以下函数： clickBtn()：用于传递当前按键值的函数。 display()：用于显示输入字符和显示结果的函数。 clearRes()：用于清空结果和已输入字符的函数。 backSpace()：用于实现退格操作的函数。 convert()：用于实现反转正负的函数。 在此计算器中，每一个按键都是一个div，数字按键、小数点按
js实现简易计算器三种基础方法
weixin_64037609的博客
09-06 1388
if-else，switch,三元运算符实现简单计算器
JS-only-calculator:完全使用JavaScript制作的简单计算器
03-30
该应用程序完全使用JavaScript制作。 甚至计算器的可视部分都是使用JavaScript创建的，因此index.html文件为空。 只需单击链接并尝试一下。 如果没有输入任何值，则单击“ =”按钮会使输出区域变为红色边框，以警告用户其计算有问题。 类似地，数字中最多只能放置一个小数点，它们会变成红色，以向用户表明出了点问题。 JS'eval（）'方法正在使用中。 计算器可使用基本功能“ +”，“-”，“ *”，“ /”。
HTML+CSS+JS制作一个简单的计算器
09-19
HTML+CSS+JS制作一个简单的计算器。该计算器的计算规则类似于我们生活中用的大计算器，暂时未发现有计算错误的问题，有问题请联系我，谢谢。
JavaScript实现简单计算器
热门推荐
weixin_47261870的博客
07-02 3万+
JavaScript和HTML实现简单计算器功能
使用 JavaScript 创建一个简单的计算器
qq_60597540的博客
11-05 5782
通过这个示例，我们可以看到使用 JavaScript 创建一个简单的计算器是非常简单的。JavaScript 提供了丰富的功能和灵活性，使得开发者能够轻松地实现各种交互功能。以上代码是一个简单的 HTML 页面，其中包括两个输入框和四个按钮，用于实现加、减、乘、除操作。JavaScript 是一种广泛应用于网页开发的脚本语言，它具有灵活、动态和强大的特性。本文将演示如何使用 JavaScript 创建一个简单的计算器，并实现基本的加减乘除操作。MDN Web 文档：JavaScript。
JS原生——编写简易计算器
m0_64954687的博客
12-06 9000
计算器
如何运用JavaScript中的函数做出一个简易计算器呢？
weixin_70747888的博客
03-21 2089
使用JS的函数功能，制作一个简易的计算器，包括加、减、乘、除的功能。输入任意操作数，使用函数传参的方式完成计算器的功能。这就是利用JS中的函数做出的很简易的一个计算器的效果，各位小伙伴快去试试吧！
javascript-calculator:一个简单的 Javascript 计算器
06-02
javascript 计算器 一个简单的 Javascript 计算器 这个项目是一个简单的计算器，使用 HTML 和 Javascript 构建。 我在这里玩的功能之一是使用空白 显示由 Javascript 创建的文本的元素。 可能的更新包括更多操作和改进的 UI。
earlybird:创建一个网络计算器
05-07
早起的鸟儿 创建一个网络计算器 非开发人员开发研讨会资料
SimpleCalculator:使用 Javascript 创建的计算器..
07-24
简单计算器 使用 Javascript 创建的计算器...在学习 javascript 的过程中，我创建了这个基本的计算器。
lesson-01-js-calculator:创建一个可以使用Javascript执行简单计算的计算器应用程序
05-08
lesson-01-js-calculator 创建一个计算器应用程序，使您可以使用Javascript执行简单的计算。 图像 概述 计算输入的两个值。 使用jQuery时 在body的结束标记之前插入以下代码。 < script src =" https://code.jquery.com/jquery-3.3.1.min.js " > </ script > 如果您使用jQuery重写Javascript，它将如下所示。 // Javascript document . getElementById ( "id-name" ) // idを指定して要素を取得 document . getElementsByClassName ( "class-name" ) // classを指定して要素を取得 document . getElementById ( "id-name" ) .
使用HTML，CSS和JavaScript创建计算器
04-07
使用HTML，CSS和JavaScript创建一个简单，时尚的计算器
JavaScript实现一个简易的计算器实例代码
10-18
主要介绍了JavaScript实现一个简易的计算器实例代码，具有很好的参考价值，希望对大家有所帮助，一起跟随小编过来看看吧
用 js+html 实现一个简易版的计算器
07-02
使用js + html 实现的简易版的网页计时器，虽然简洁，但是小巧，它能进行加、减、乘、除运算，并且可以对小数、负数、带括号的三个数以上的式子进行运算，当然回退和归零功能也是必备的，还可以设置主题皮肤，代码...
基于JSP实现一个简单计算器的方法
01-20
本文实例讲述了基于JSP实现一个简单计算器的方法。分享给大家供大家参考。具体实现方法如下： index.jsp 代码如下:<%@ page language=”java” import=”java.util.*” pageEncoding=”GB18030″%>  <&#...
用javaScript写一个简易计算器
03-13
好的，我可以回答这个问题。以下是一个简单的JavaScript计算器代码示例： HTML代码： ``` <div> <input type="text" id="num1" placeholder="输入第一个数字"> <input type="text" id="num2" placeholder="输入第二个数字"> <br> <button onclick="add()">加</button> <button onclick="subtract()">减</button> <button onclick="multiply()">乘</button> <button onclick="divide()">除</button> <br> <input type="text" id="result" placeholder="结果"> </div> ``` JavaScript代码： ``` 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); var result = num1 / num2; document.getElementById("result").value = result; } ``` 这个计算器可以进行加、减、乘、除四种基本运算。用户输入两个数字，点击相应的按钮即可得到计算结果。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值