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){case1:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))alert(str1 + str2)
                console.log("加法运算");breakcase2:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))alert(str1 - str2)
                console.log("减法运算");breakcase3:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))alert(str1 * str2)
                console.log("乘法运算");breakcase4:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))alert(str1 / str2)
                console.log("除法运算");breakcase5:
                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>functionjiafa(num1, num2){return num1 + num2
        }functionjianfa(num1, num2){return num1 - num2
        }functionchengfa(num1, num2){return num1 * num2
        }functionchufa(num1, num2){return num1 / num2
        }var str ='欢迎使用简易计算器:\n1. 加法运算;\n2. 减法运算;\n3. 乘法运算;\n4. 除法运算;\n5. 退出:\n请输入您的选项';var option =parseInt(prompt(str))switch(option){case1:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))
                result =jiafa(str1, str2)alert(result)
                console.log("加法运算");breakcase2:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))
                result =jianfa(str1, str2)alert(result)
                console.log("减法运算");breakcase3:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))
                result =chengfa(str1, str2)alert(result)
                console.log("乘法运算");breakcase4:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))
                result =chufa(str1, str2)alert(result)
                console.log("除法运算");breakcase5:
                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>functionCounter(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){case1:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))
                result =newCounter(str1, str2).jiafa()alert(result)
                console.log("加法运算");breakcase2:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))
                result =newCounter(str1, str2).jianfa()alert(result)
                console.log("减法运算");breakcase3:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))
                result =newCounter(str1, str2).chengfa()alert(result)
                console.log("乘法运算");breakcase4:var str1 =parseInt(prompt("请输入第一个数"))var str2 =parseInt(prompt("请输入第二个数"))
                result =newCounter(str1, str2).chufa()alert(result)
                console.log("除法运算");breakcase5:
                console.log("退出");breakdefault:
                console.log("输入错误")break}</script></body></html>

在这里插入图片描述