用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.创建基本函数
<!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>
总结
到此这篇关于用JavaScript做一个简易计算器的三种方法的文章就介绍到这了,更多相关JS简易计算器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
以下上是我在学习和使用了JS一段时间后,为了更深入的了解它, 也为了更好的把握对它的应用, 从而在对闭包的学习过程中,自己对于词法作用域的一些理解和总结2010-08-08
本篇文章主要是对javascript模拟枚举的简单实例进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助2014-03-03
目前网络上有关javascript实现OOP模式的方案基本上都是prototype模式，一般性的示例代码如下2009-04-04
这篇文章主要给大家介绍了关于echarts实现雷达图的详细步骤,雷达图(Radar Chart)是一种信息丰富的可视化工具,其中多个变量（三个或更多）在二维平面上进行比较,文中给出了完整的代码示例,需要的朋友可以参考下2024-01-01
这篇文章主要介绍了浅谈JavaScript中的string拥有方法的原因,需要的朋友可以参考下2015-08-08
这篇文章主要介绍了BootStrap实现树形目录组件代码详解的相关资料,非常不错，具有参考借鉴价值，需要的朋友可以参考下2016-06-06
JavaScript中的任务分为宏任务和微任务，它们的执行顺序会影响代码的执行结果。了解它们的机制可以帮助我们更好地理解事件循环和异步编程，避免出现一些意想不到的错误2023-05-05
下面小编就为大家分享一篇基于滚动条位置判断的简单实例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-12-12
今天小编就为大家分享一篇layer ui插件显示tips时,修改字体颜色的实现方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了jsPDF如何导出pdf，不过其貌似不支持中文,需要的朋友可以参考下2014-05-05
最新评论