JavaScript 用三种方法做一个简易计算器
- 1.普通使用
- 2.创建基本函数
- 3.构造函数创建
基本数据类型 / 使用对象创建
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>
文章来源：https://uudwc.com/A/Xkg8k
文章来源地址https://uudwc.com/A/Xkg8k
