用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.創(chuàng)建基本函數

<!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.構造函數創(chuàng)建

new關鍵字執(zhí)行過程

// 1.new構造函可以在內存中創(chuàng)建了一個空的對象

// 2.this就會指向剛才創(chuàng)建的空對象

// 3.執(zhí)行構造函數里面的代碼給這個空對象添加屬性和方法

// 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>