JavaScript uses three methods to make a simple calculator
Basic data types/create using objects
1. Ordinary use
<!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. Create basic functions
<!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. Constructor creation
New keyword execution process
// 1. The new constructor can create an empty object in the memory
// 2. This will point to the empty object just created
// 3. Execute the code in the constructor to add to this empty object Properties and methods
// 4. Return this new object (so no return is needed in the constructor)
<!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>
