JavaScript 用三种方法做一个简易计算器
作者:小教学发布时间:2023-10-02分类:程序开发学习浏览:95
导读:JavaScript用三种方法做一个简易计算器1.普通使用2.创建基本函数3.构造函数创建基本数据类型/使用对象创建1.普通使用<!DOC...
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>
- 程序开发学习排行
- 最近发表
-
- Wii官方美版游戏Redump全集!游戏下载索引
- 视觉链接预览最好的WordPress常用插件下载博客插件模块
- 预约日历最好的wordpress常用插件下载博客插件模块
- 测验制作人最好的WordPress常用插件下载博客插件模块
- PubNews Plus|WordPress主题博客主题下载
- 护肤品|wordpress主题博客主题下载
- 肯塔·西拉|wordpress主题博客主题下载
- 酷时间轴(水平和垂直时间轴)最好的wordpress常用插件下载博客插件模块
- 作者头像列表/阻止最好的wordPress常用插件下载博客插件模块
- Elementor Pro Forms最好的WordPress常用插件下载博客插件模块的自动完成字段