JavaScript 实现基本计算器

编辑: admin 分类: 电脑知识 发布时间: 2023-06-14 来源:互联网
JavaScript 实现基本计算器在课堂案例基础上更新以下功能

  • 更新 CSS 样式

  • 添加 M+、M-、MR、MC 功能：

  • 添加正负数切换功能

  • 操作符不能位于首位，连续输入时只显示最后输入的操作符

  • 除零错误

  • 按下 +、-、x、÷ 后先计算结果，再添加操作符

JavaScript 代码如下
  1. // 定义 memory 变量，用于存储 M+、M- 数据
  2. let memory = 0;
  4. function calculator(ev){
  5.     // 获取显示区 input 元素
  6.     const result = document.querySelector('.result');
  8.     // 获取显示区内容的最后一个字符，用于判断是否连续输入操作符
  9.     const lastChar = result.value.slice(result.value.length - 1, result.value.length);
  10.     let isLastCharOperator = false;
  11.     if(lastChar == '+' || lastChar == '-' || lastChar == 'x' || lastChar == '÷'){
  12.         isLastCharOperator = true;
  13.     }
  15.     // 如果点击的不是按钮则返回
  16.     if (ev.target.tagName !== 'BUTTON') return false;
  18.     // 获取当前按钮元素
  19.     const curBtn = ev.target;
  21.     // 获取当前按钮元素内容
  22.     let content = curBtn.textContent;
  24.     // 计算函数，+、-、X、/、= 五个操作符都会用到
  25.     function calResult(){
  26.         // 缓存结果
  27.         let tmpResult = 0;
  29.         try {
  30.             //   如果是乘法,将 "x" 换成 "*"
  31.             result.value = result.value.replace('x', '*');
  33.             //   如果是除法,将 "÷" 换成 "/"
  34.             result.value = result.value.replace('÷', '/');
  36.             // 计算字符串表达式
  37.             if(result.value == '错误'){
  38.                 tmpResult = 0;
  39.             } else if(result.value.search('/') > 0){
  40.                 // 如果除于 0 显示“错误”
  41.                 const tempArr = result.value.split('/');
  42.                 if (tempArr[tempArr.length-1] == 0){
  43.                     tmpResult = '错误';
  44.                 } else {
  45.                     tmpResult = eval(result.value);
  46.                 }
  47.             } else {
  48.                 tmpResult = eval(result.value);
  49.             }            
  51.             // 如果结果是小数,仅保留5位就可以了
  52.             if (tmpResult.toString().includes('.')) {
  53.                 tmpResult = tmpResult.toFixed(5);
  54.                 // 如果小数部分出现了多余的0,应该去掉(对结果精度没影响)
  55.                 tmpResult = parseFloat(tmpResult);
  56.             }
  58.             // 显示出结果
  59.             result.value = tmpResult;
  60.         } catch {
  61.             result.value = '错误';
  62.         }
  63.     }
  65.     // 操作符通用函数
  66.     function fnOperator() {
  67.         // 如果当前显示“错误”，归零
  68.         if (result.value == '错误') {
  69.             result.value = 0;
  70.         } else if (isLastCharOperator) {
  71.             // 连续输入操作符，显示最后按的操作符
  72.             // 如果操作符后输入“=”，无操作
  73.             if(content !== '='){
  74.                 result.value = result.value.slice(0, -1);
  75.                 result.value += content; 
  76.             }
  77.         } else {
  78.             calResult();
  79.             // 计算结果是“错误”，则不加当前操作符            
  80.             if (result.value !== '错误'){
  81.                 // 当前按钮是“=”，也不加当前操作符
  82.                 if(content !== '='){
  83.                     result.value += content;
  84.                 }                
  85.             }            
  86.         }
  87.     }
  89.     // 根据用户点击的按钮内容确定要执行的操作
  90.     switch (content){
  91.         // AC 清零
  92.         case 'AC': result.value = '0'; break;
  94.         // CE: 退格
  95.         case 'CE':
  96.             // 如果结果区只有一位数字，或 “错误”，恢复为 0，否则删除最后一个字符
  97.             if (result.value.length == 1 || result.value == '错误') {
  98.                 result.value = 0;
  99.             } else {
  100.                 // 删除最后一个字符
  101.                 result.value = result.value.slice(0, -1);
  102.             }
  103.             break
  105.         // M+ 累加存储数据
  106.         case 'M+':
  107.             // 判断显示区内容是否是纯数字
  108.             // 如果不是纯数字（含有操作符），显示“错误”
  109.             // 如果是纯数字，则将其转换成数值并累加到变量 memory
  110.             if ( isNaN(Number(result.value)) ){
  111.                 result.value = '错误';
  112.             } else {
  113.                 memory += Number(result.value);
  114.             }
  115.             break;
  117.         case 'M-':
  118.             // 判断显示区内容是否是纯数字
  119.             // 如果不是纯数字（含有操作符），显示“错误”
  120.             // 如果是纯数字，则将变量 memory 减去其转换成的数值
  121.             if ( isNaN(Number(result.value)) ){
  122.                 result.value = '错误';
  123.             } else {
  124.                 memory -= Number(result.value);
  125.             }
  126.             break;
  128.         case 'MR':
  129.             // 如果显示区不是纯数字
  130.             // 1，“错误” => 将显示区内容改为变量 memory 的值
  131.             // 2，含有操作符，则将 memory 值添加到操作符后面
  132.             // 如果显示区为纯数字，将显示区内容改为变量 memory 的值
  133.             if (result.value == '错误'){
  134.                 result.value = memory;
  135.             } else if (isNaN(Number(result.value))){
  136.                 result.value += memory;
  137.             } else {
  138.                 result.value = memory;
  139.             }
  140.             break;
  142.         case 'MC':
  143.             // 将变量 memory 的值清零
  144.             memory = 0;
  145.             break;
  147.         case '±':
  148.             // 判断显示区内容是否是纯数字
  149.             // 如果不是纯数字（含有操作符），不进行任何操作
  150.             // 如果是纯数字，则切换正负
  151.             if ( isNaN(Number(result.value)) ){
  152.                 return false;
  153.             } else {
  154.                 result.value = -result.value;
  155.             }
  156.             break;
  158.         case '+': fnOperator(); break;
  159.         case '-': fnOperator(); break;
  160.         case 'x': fnOperator(); break;
  161.         case '÷': fnOperator(); break;
  162.         case '=': fnOperator(); break;
  164.         default:
  165.             // 如果当前结果区显示0,先清空, 防止出现前导0
  166.             // 如果当前结果区显示“错误”，先清空
  167.             if (result.value == 0 || result.value == '错误') {
  168.                 result.value = ''
  169.             }
  170.             result.value += content;
  171.     }
  172. }
【转自：滨海网站设计公司 http://www.1234xp.com/binhai.html 欢迎留下您的宝贵建议】
更多阅读