JavaScript实现简易计算器功能的两种方法

 更新时间:2022年07月29日 11:04:35   作者:是木木呀22  
这篇文章主要为大家详细介绍了JavaScript实现简易计算器功能的两种方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

本文实例为大家分享了两种JavaScript实现简易计算器功能的具体代码,供大家参考,具体内容如下

1. 使用基本数据类型

注意点: prompt 用户从浏览器输入的任何数据都是字符串型的,使用数字需要强制转换

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
// 简易对象器
function input1(){
    var num1 = prompt('请输入第一个数:');
    return parseFloat(num1);
}
function input2(){
    var num2 = prompt('请输入第二个数:');
    return parseFloat(num2);
}
// 1. 加法运算
function add(num1, num2){
    return num1 + num2;
}
// 2. 减法运算
function sub(num1, num2){
    return num1 - num2;
}
// 3. 乘法运算
function multiply(num1, num2){
    return num1 * num2;
}
// 4. 除法运算
function divition(num1, num2){
    return num1 / num2;
}
var str = '欢迎使用简易计算器:\n1. 加法运算;\n2. 减法运算;\n3. 乘法运算;\n4. 除法运算;\n5. 退出:\n请输入您的选项';
var option;
var result;
do{
    option = parseFloat(prompt(str));
    switch (option){
    case 1:
        result = add(input1(), input2());
        alert('结果是 ' + result);
        break;
    case 2:
        result = sub(input1(), input2());
        alert('结果是 ' + result);
        break;
    case 3:
        result = multiply(input1(), input2());
        alert('结果是 ' + result);
        break;
    case 4:
        result = divition(input1(), input2());
        alert('结果是 ' + result);
        break;
    case 5:
        alert('已退出程序');
        break;
    default:
        alert('输入错误,请重新输入');
        break;
    }
} while(option != 5);

效果展示:

2.使用对象,将简易计算器作为一个对象创建

注意点:构造函数命名首字母大写

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 // 创建简易计算器, 一个运算类 注意构造函数命名 首字母大写
function Counter(num1, num2){
    //输入 数据 这里感觉好像有点多于,但是没有的话,又有点奇怪 可以把下面num1num2全部加上this
    this.num1 = num1;
    this.num2 = num2;
    // 加
    this.add = function(){
        return num1 + num2;
    }
    // 减
    this.sub = function(){
        return num1 - num2;
    }
    // 乘
    this.multiply = function(){
        return num1 * num2;
    }
    // 除
    this.divition = function(){
        return num1 / num2;
    }
}
function input1(){
    var num1 = prompt('请输入第一个数:');
    return parseFloat(num1);
}
function input2(){
    var num2 = prompt('请输入第二个数:');
    return parseFloat(num2);
}
var str = '欢迎使用简易计算器:\n1. 加法运算;\n2. 减法运算;\n3. 乘法运算;\n4. 除法运算;\n5. 退出:\n请输入您的选项';
var option = 0;
var result;
while(option != 5){
    option = parseFloat(prompt(str));
    if(option != 5){ //防止输入5后下一步还运行创建新运算对象,所以直接跳过去选择case5然后跳出循环
        var counter_new = new Counter(input1(), input2()); // 新的运算对象
    }
    switch (option){
    case 1:
        result = counter_new.add();
        alert('结果是 ' + result);
        break;
    case 2:
        result = counter_new.sub();
        alert('结果是 ' + result);
        break;
    case 3:
        result = counter_new.multiply();
        alert('结果是 ' + result);
        break;
    case 4:
        result = counter_new.divition();
        alert('结果是 ' + result);
        break;
    case 5:
        alert('已退出程序');
        break;
    default:
        alert('输入错误,请重新输入');
        break;
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/weixin_45899362/article/details/123369944

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • ionic实现下拉刷新载入数据功能

    ionic实现下拉刷新载入数据功能

    这篇文章主要为大家详细介绍了ionic实现下拉刷新载入数据功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • JS实现随机数生成算法示例代码

    JS实现随机数生成算法示例代码

    JS实现随机数生成算法的方法有很多,本文为大家介绍一个比较不错的方法,代码如下,感兴趣的朋友可以参考下,希望对大家有所帮助
    2013-08-08
  • JS中的Error对象及使用JSON.stringify()序列化Error问题

    JS中的Error对象及使用JSON.stringify()序列化Error问题

    这篇文章主要介绍了JS中的Error对象及使用JSON.stringify()序列化Error问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 使用html+js+css 实现页面轮播图效果(实例讲解)

    使用html+js+css 实现页面轮播图效果(实例讲解)

    下面小编就为大家带来一篇使用html+js+css 实现页面轮播图效果(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09
  • 4 种滚动吸顶实现方式的比较

    4 种滚动吸顶实现方式的比较

    这篇文章主要介绍了4种滚动吸顶实现方式的比较,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 详解基于DllPlugin和DllReferencePlugin的webpack构建优化

    详解基于DllPlugin和DllReferencePlugin的webpack构建优化

    这篇文章主要介绍了详解基于DllPlugin和DllReferencePlugin的webpack构建优化,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 异步加载script的代码

    异步加载script的代码

    通过异步请求另一页面的script 是不执行的,只返回html 原文件,因为返回的文本没有经过浏览器的解析执行。
    2011-01-01
  • 使用JavaScript实现文本收起展开(省略)功能

    使用JavaScript实现文本收起展开(省略)功能

    省略号,作为一种常见的文本处理方式,在很多情况下都十分常见,特别是当我们需要在省略号后面添加额外文字时,本文为大家介绍了使用JavaScript实现文本收起展开功能的相关方法,希望对大家有所帮助
    2024-04-04
  • JS原型与原型链的深入理解

    JS原型与原型链的深入理解

    这篇文章主要和大家一起深入理解JS原型与原型链,原型是JavaScript中一个比较难理解的概念,本文为大家解决这个难题,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 很全面的JavaScript常用功能汇总集合

    很全面的JavaScript常用功能汇总集合

    这篇文章主要为大家分享了一份很全面的JavaScript常用功能汇总集合,一些常用的额JS 对象、基本数据结构、功能函数等,感兴趣的小伙伴们可以参考一下
    2016-01-01

最新评论