JavaScript简易计算器实现

<script type="text/javascript">
    const calculator = document.querySelector('#calculator'); // 计算器区域元素对象选择
    const keys = calculator.querySelector('#keys'); // 按键区域元素对象选择
    const display = calculator.querySelector('#display'); // 显示区域元素对象选择
    // 按钮按键事件侦听
    keys.addEventListener('click',e=>{
        if(e.target.matches('button')){
            const key = e.target;  //获取当前按键
            const action = key.dataset.action;  // 获取当前按键定义的默认行为
            const keyContent = key.textContent; // 获取当前按键文本内容
            const displayedNum = display.textContent; // 获取当前显示区域内容
            const previousKeyType = calculator.dataset.previousKeyType; // 获取当前按键之前的按键类型
            // 按键不是计算类按键（add,subtract,multipyly,divide,decimal,clear,calculate）           
            // 当前按键类型为数字按键0.0或者之前的按键为计算行为按键或者等号按键，
            // 则显示区域内容为当前按键内容，即为第一位计算数字
            // 否则为显示内容为输入数字叠加，即多位输入数字
            if(!action){
                display.textContent = displayedNum === '0.0' || 
                                      previousKeyType === 'operator' || 
                                      previousKeyType === 'calculate'?keyContent: displayedNum + keyContent;
                calculator.dataset.previousKeyType = 'number';
            }
            // 当前按键类型为计算行为按键
            if(action ==='add'||  action ==='subtract' || action ==='multiply'|| action ==='divide' ){
                const firstValue = calculator.dataset.firstValue
                const operator = calculator.dataset.operator
                const secondValue = displayedNum             
                // 如果之前的按键为运算符或等号则计算结果，否则将之前的输入内容作为计算结果
                const calcValue = firstValue && 
                                  operator && 
                                  previousKeyType !== 'operator' && 
                                  previousKeyType !== 'calculate'?calculate(firstValue, operator, secondValue) : displayedNum;
                calculator.dataset.firstValue = display.textContent =  calcValue;   
                calculator.dataset.operator = action;                          
                calculator.dataset.previousKeyType = 'operator';               
            }
            // 当前按键类型为小数点按键
            // 如果之前的输入中不包含小数点，则添加小数点，否则如果小数点按下之前是计算操作或获取计算结果，则清除显示内容，表示要输入第二个操作数
            if(action ==='decimal'){
                if (!displayedNum.includes('.')) {
                    display.textContent = displayedNum + '.'
                } else if (previousKeyType === 'operator'|| previousKeyType == 'calculate') {
                    display.textContent = '0.'
                }
                calculator.dataset.previousKey = 'decimal';
            }
            // 当前按键类型为消除按键
            if(action ==='clear'){
                if (key.textContent === 'AC') {
                    calculator.dataset.firstValue = '';
                    calculator.dataset.modValue = '';
                    calculator.dataset.operator = '';
                    calculator.dataset.previousKeyType = '';
                  } else {
                    key.textContent = 'AC';
                  }
                display.textContent = '0.0';
                calculator.dataset.previousKeyType = 'clear';
            }else{
                const clearButton = calculator.querySelector('[data-action=clear]')
                clearButton.textContent = 'CE'
            }
            // 当前键类型为等号按键
            if(action ==='calculate'){    
                let firstValue = calculator.dataset.firstValue;
                const operator = calculator.dataset.operator;
                const modValue = calculator.dataset.modValue; // 保留下来的第一次计算结果值

                display.textContent = firstValue?previousKeyType === 'calculate'?
                                      calculate(displayedNum,operator,modValue) : 
                                      calculate(firstValue,operator,displayedNum) : displayedNum;
                calculator.dataset.modValue = displayedNum; // 保留计算结果值
                calculator.dataset.previousKeyType = 'calculate';

                const clearButton = calculator.querySelector('[data-action=clear]')
                if(clearButton.textContent === 'CE'){
                  clearButton.textContent = 'AC'
                }
            }
        }
    })
</script>

<style>
    body {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh; /*vh视口高度100%,vw视口宽度默认*/
      background: linear-gradient(245deg, #74ebd5, #5d6587);
    }
    .container {
      width:420px;
      font-size: 18px;
    }
    .calculator {
      border-radius: 12px;
      box-shadow: 0 0 40px 0px rgba(0, 0, 0, 0.15);
      margin-left: 0;
      margin-right: 0;
      margin-top: 2em;
      overflow: hidden;
    }
    .display {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      height: 60px;
      background-color: #222222;
      color: #fff;
      font-size: 1.7em; /*父元素字体大小的1.7倍*/
      padding: 0.5em 0.75em;
    }
    button {
      border: 0;
      border-radius: 0;
      background-color: transparent;
      font-size: 1.5em; /*父元素字体大小的1.5倍*/
      font-family: Arial;
      text-align: center;
    }
    /* 键盘部分采用表格布局 */
    .keys {
      background-color: #999;
      display: grid; /*表格布局*/
      grid-gap: 1px; /*单元格间距*/
      grid-template-columns: repeat(4, 1fr);/*4列，每列fr弹性占比为1:1:1:1*/
    }
    .keys > * {
      background-color: #fff;
      padding: 0.5em 1.5em;
      position: relative;
    }
    .keys > *:hover{
      background-color: #d1fed6;
      cursor: pointer;
    }
    .keys > *:active::before{
      content: "";
      background-color: rgba(0, 0, 0, 0.2); 
      box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.5) inset;
      opacity: 0.3;
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      z-index: 1;
    }
    .key-operator {
      background-color: #eee;
    }
    .key-equal {
      background: linear-gradient(to bottom, #fe886a, #ff7033);
      grid-column: -2; /* 放置到倒数第2列 */
      grid-row: 2 / span 4; /*从第2行开始，跨4列*/
    }
</style>
<div class="container">
    <div class="calculator" id="calculator">
        <div class="display" id="display">0.0</div>
        <div class="keys" id="keys">
          <button class="key-operator" data-action="add">+</button>
          <button class="key-operator" data-action="subtract">-</button>
          <button class="key-operator" data-action="multiply">×</button>
          <button class="key-operator" data-action="divide">÷</button>
          <button>7</button>
          <button>8</button>
          <button>9</button>
          <button>4</button>
          <button>5</button>
          <button>6</button>
          <button>1</button>
          <button>2</button>
          <button>3</button>
          <button>0</button>
          <button data-action="decimal">.</button>
          <button data-action="clear">AC</button>
          <button class="key-equal" data-action="calculate">=</button>
        </div>
    </div>
</div>