函数综合 简易计算器案例

项目说明

---

名称：仿windows计算器
功能
1、实现单击按钮录入数字
2、实现基础四则运算功能，并添加必要的异常处理，例如，除数为零
3、实现小数点功能并添加异常处理：小数点只能出现一次
4、实现正负号功能
5、实现退位功能，已经是最后一位时，显示框显示为零
6、清屏功能

---

使用的知识点
1、利用大量的自定义函数实现业务逻辑
2、灵活运用事件及事件处理
3、培养异常处理的编程方法
4、培养并实践利用不同思路实现编程
综合练习的目的
1、将css、html和js有效的进行技术组合，实现业务功能
2、锻炼和培养编程思想，解决问题的能力和方法
3、锻炼和培养利用多种编程思路，完成预先设定的目标

---

简易计算器V2.0版本 2020年6月4日
bug修复
1、JavaScript小数加减运算产生的bug 例如0.1+0.2 0.5-0.6（已修复）
2、乘法除法连续按等号可能导致的bug 例如1.4*2=== （已修复）
体验优化
1、小数点启用后 修改该按钮的背景颜色 （已优化）
2、负号启用后 修改该按钮的背景颜色 （已优化）
3、点击加减乘除后的停滞效果 （已优化）
4、计算框内不应出现‘-01’的画面 （已优化）
5、计算器最多只能输入10个数字 （已优化）
6、计算器只能进行10位有效数字以内的计算 （已优化）
7、除法保留小数位数 防止显示溢出 （已优化）

---

实现效果图

小数点功能的实现

1、小数点只能够出现一次
2、在小数点case这里直接写代码还是函数调用？
3、技术点：indexof() 查找字符是否存在的吗，存在的话返回大于0，不存在返回-1

回退键的实现

需求：将文本框中的最后一个字符删掉，保留文本框中其他内容
1、文本框里面有123，按下退位键保留12，再次按下保留1
2、当只剩下1的时候，按下退位键，文本框恢复到默认状态为0

清屏和正负号

清屏：赋值为0
正负号：
1、输入123，第一次单击添加-，再次单击显示+
2、如果数字前面有负号那就取消，没有负号就加上，类似开关按钮

计算器的细节收尾

1、鼠标指针悬浮在按钮上希望加上背景
2、0和边框右侧距离有点大

JavaScript部分重点代码

function init(){
  // 初始化 设置初值以及编辑状态
  var num = document.getElementById('num');
  num.value = 0;
  num.disabled = 'disabled';

  // 获取按钮信息并设置操作
  var oButton = document.getElementsByTagName('input');
  var save,operator;
  for (var i=0;i<oButton.length;i++){
    oButton[i].onclick = function(){
      if (isNumber(this.value)) {
        if (isNull(num.value)) {
          num.value = this.value;
        } else {
          if (changdu(num.value)>=10) {
            alert('至多输入10位有效数字');
          } else {
            if (num.value=='-0') {
              num.value = this.value * (-1);
            } else {
              num.value = num.value + this.value;
            } 
          }
        }
      } else {
        var btn = this.value;
        switch(btn) {
          case '+':
            save = Number(num.value);
            num.value = 0;
            operator = '+';
            cleanbgc();
            document.getElementById('plus').style.backgroundColor = '#ccc';
            break;
          case '-':
            save = Number(num.value);
            num.value = 0;
            operator = '-';
            cleanbgc();
            document.getElementById('subtract').style.backgroundColor = '#ccc';
            break;
          case '*':
            save = Number(num.value);
            num.value = 0;
            operator = '*';
            cleanbgc();
            document.getElementById('multiply').style.backgroundColor = '#ccc';
            break;
          case '/':
            save = Number(num.value);
            num.value = 0;
            operator = '/';
            cleanbgc();
            document.getElementById('division').style.backgroundColor = '#ccc';
            break;
          case '.':
            num.value = dotCheck(num.value);
            break;
          case 'B':
            num.value = back(num.value);
            break;
          case 'C':
            num.value = 0;
            operator = '';
            break;
          case '+/-':
            num.value = sign(num.value);
            break;
          case '=':
            cleanbgc();
            switch(operator) {
              case '+':
                num.value = (save*10 + Number(num.value)*10)/10;
                // console.log(num.value);
                if (changdu(num.value)>10) {
                  alert('计算器只能进行10位有效数字以内的计算');
                  num.value = save;
                }
                operator = '';
                break;
              case '-':
                num.value = (save*10 - Number(num.value)*10)/10;
                // console.log(num.value);
                if (changdu(num.value)>10) {
                  alert('计算器只能进行10位有效数字以内的计算');
                  num.value = save;
                }
                operator = '';
                break;
              case '*':
                num.value = save * Number(num.value);
                if (changdu(num.value)>10) {
                  alert('计算器只能进行10位有效数字以内的计算');
                  num.value = save;
                }
                operator = '';
                break;
              case '/':
                if (Number(num.value)==0) {
                  alert('除数不能为0');
                  num.value = 0;
                } else {
                  num.value = save / Number(num.value);
                  if (changdu(num.value)>10) {
                  // alert('计算器只能保留到小数点后9位数字');
                  num.value = num.value.substr(0,11);
                  }
                }
                operator = '';
                break;
            }
            break;
        }
      }
      // 判断小数点是否存在
      if (num.value.indexOf('.')==-1) {
        document.getElementById('dot').style.backgroundColor = '';
      } else {
        document.getElementById('dot').style.backgroundColor = '#ccc';
      }
      // 判断负号是否存在
      if (num.value.indexOf('-')==-1) {
        document.getElementById('minus').style.backgroundColor = '';
      } else {
        document.getElementById('minus').style.backgroundColor = '#ccc';
      }
    }
  }
}