JavaScript 用两种方法做一个简易计算器

第一种 使用基本数据类型

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

// 简易对象器
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.使用对象,将简易计算器作为一个对象创建

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

 // 创建简易计算器, 一个运算类 注意构造函数命名 首字母大写
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;
    }
} 
  • 9
    点赞
  • 54
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
好的,以下是一个简单的JavaScript计算器示例: HTML代码: ```html <!DOCTYPE html> <html> <head> <title>计算器</title> </head> <body> <form name="calculator"> <input type="text" name="result" id="result" value="" /> <br /> <input type="button" value="1" onclick="calculator.result.value+='1'" /> <input type="button" value="2" onclick="calculator.result.value+='2'" /> <input type="button" value="3" onclick="calculator.result.value+='3'" /> <input type="button" value="+" onclick="calculator.result.value+='+'" /> <br /> <input type="button" value="4" onclick="calculator.result.value+='4'" /> <input type="button" value="5" onclick="calculator.result.value+='5'" /> <input type="button" value="6" onclick="calculator.result.value+='6'" /> <input type="button" value="-" onclick="calculator.result.value+='-'" /> <br /> <input type="button" value="7" onclick="calculator.result.value+='7'" /> <input type="button" value="8" onclick="calculator.result.value+='8'" /> <input type="button" value="9" onclick="calculator.result.value+='9'" /> <input type="button" value="*" onclick="calculator.result.value+='*'" /> <br /> <input type="button" value="c" onclick="calculator.result.value=''" /> <input type="button" value="0" onclick="calculator.result.value+='0'" /> <input type="button" value="=" onclick="calculator.result.value=eval(calculator.result.value)" /> <input type="button" value="/" onclick="calculator.result.value+='/'" /> </form> </body> </html> ``` JS代码: ```javascript // 禁用Enter键提交表单 document.onkeydown = function(event) { if (event.keyCode == 13) { return false; } } // 将数字和符号添加到计算器屏幕上 function addInput(input) { document.calculator.result.value += input; } // 清空计算器屏幕 function clearInput() { document.calculator.result.value = ""; } // 计算结果 function calculateResult() { try { var result = eval(document.calculator.result.value); document.calculator.result.value = result; } catch (error) { alert("输入有误,请重新输入!"); } } ``` 在HTML代码中,我们创建了一个表单,其中包含一个文本框用于显示计算结果,以及一些按钮用于添加数字和运算符。每个按钮都有一个 `onclick` 属性,当用户单击按钮时,将调用相应的 JavaScript 函数。 在JS代码中,我们定义了三个函数:`addInput()` 用于将数字和符号添加到计算器屏幕上,`clearInput()` 用于清空计算器屏幕,`calculateResult()` 用于计算结果并将其显示在计算器屏幕上。在 `calculateResult()` 函数中,我们使用 `try...catch` 语句来捕获用户可能输入的错误表达式,如果发生错误,我们将显示一个警告框提示用户重新输入。 这只是一个简单的计算器示例,如果你想进一步完善它,可以添加更多的功能和操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值