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

更新时间：2023年10月09日 14:50:19 作者：Lineason

这篇文章主要给大家介绍了关于用JavaScript做一个简易计算器的三种方法,JS中实现一个简单的计算器并不困难,我们只需利用基本的数学运算符和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>

总结

到此这篇关于用JavaScript做一个简易计算器的三种方法的文章就介绍到这了,更多相关JS简易计算器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

微信小程序之五种页面跳转方法小结
本文主要介绍了微信小程序之五种页面跳转方法小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-06-06
购物车选中得到价格实现示例
本文为大家介绍下购物车如何实现选中得到价格，下面有个不错的示例，大家可以参考下
2014-01-01
关于在LayUI中使用AJAX提交巨坑记录
今天小编就为大家分享一篇关于在LayUI中使用AJAX提交巨坑记录，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
js图片实时加载提供网页打开速度
没必要一开始加载就要把全部图片加载出来，这样子打开网面的速度得到了很好提高，下面有个不错的思路，大家可以看看
2014-09-09
XML、HTML、CSS与JS的区别整理
在BS中，xml，html，css和js我们都学过，起初分不清这四者的区别和联系，随着知识的增长，有了一些体会，下面通过本文给大家简单介绍 XML、HTML、CSS与JS的区别，需要的朋友参考下
2016-02-02
JavaScript面向对象实现放大镜案例
这篇文章主要为大家详细介绍了JavaScript面向对象实现放大镜案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-10-10
JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)
下面小编就为大家带来一篇JS判断输入字符串长度实例代码(汉字算两个字符,字母数字算一个)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-08-08
仿淘宝JSsearch搜索下拉深度用法
本篇文章通过仿照淘宝搜索关键字后下拉相关产品搜索样子的制作，深度分析了JSsearch的用法，一起跟着小编学习下吧。
2018-01-01
webpack多页面开发实践
这篇文章主要介绍了webpack多页面开发实践，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-12-12
JavaScript中的常见继承总结
这篇文章主要介绍了JavaScript中的常见继承总结，继承其实就是构造函数和构造函数之间的一种关系，更多相关介绍，需要的小伙伴可以参考下面文章内容
2022-09-09