HTML+CSS3+javaScript 实现漂亮的计算器

计算机截图

简易版计算机

)

代码实现

<style>
      body {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 100vh;
        background: #2f3542;
      }
      .calculator {
        position: relative;
        display: grid;
      }
      .calculator .value {
        grid-column: span 4;
        height: 100px;
        text-align: right;
        border: none;
        outline: none;
        padding: 10px;
        font-size: 18px;
      }
      .calculator span {
        display: grid;
        width: 60px;
        height: 60px;
        color: #fff;
        background: #0c2835;
        place-items: center;
        border: 1px solid rgba(0, 0, 0, 0.1);
      }
      .calculator span:active {
        background: #74ff3b;
        color: #111;
      }
      .calculator span.clear {
        grid-column: span 2;
        width: 120px;
        background-color: coral;
      }
      .calculator span.plus {
        grid-row: span 2;
        height: 120px;
      }
      .calculator span.equal {
        background: #1e90ff;
      }
    </style>
    //style 样式
```html
<form class="calculator" name="calc" action="">
      <input class="value" type="text" name="txt" readonly="" />
      <span class="num" onclick="document.calc.txt.value=''">AC</span>
      <span class="num" onclick="operation(this)">c</span>
      <span class="num" onclick="operation(this)">/</span>
      <span class="num" onclick="operation(this)">*</span>
      <span class="num" onclick="document.calc.txt.value+='7'">7</span>
      <span class="num" onclick="document.calc.txt.value+='8'">8</span>
      <span class="num" onclick="document.calc.txt.value+='9'">9</span>
      <span class="num" onclick="operation(this)">-</span>
      <span class="num" onclick="document.calc.txt.value+='4'">4</span>
      <span class="num" onclick="document.calc.txt.value+='5'">5</span>
      <span class="num" onclick="document.calc.txt.value+='6'">6</span>
      <span class="num plus" onclick="operation(this)">+</span>
      <span class="num" onclick="document.calc.txt.value+='3'">3</span>
      <span class="num" onclick="document.calc.txt.value+='2'">2</span>
      <span class="num" onclick="document.calc.txt.value+='1'">1</span>
      <span class="num" onclick="operation(this)">0</span>
      <span class="num" onclick="operation(this)">00</span>
      <span class="num" onclick="operation(this)">.</span>
      <span
        class="num equal"
        onclick="document.calc.txt.value=eval(calc.txt.value)"
        >=</span
      >
    </form>
    //HTML代码

function operation(e) {
        var str, lastV, startV;
        var optV = e.innerHTML.toString();
        str = document.calc.txt.value;
        lastV = str.charAt(str.length - 1);
        startV = str.charAt(0);
        // console.log(typeof optV);
        switch (optV) {
          case "c":
            document.calc.txt.value = str.substring(0, str.length - 1);
            return document.calc.txt.value;
            break;
          case "00":
            if (startV == "0" || startV == "") {
              return document.calc.txt.value;
              break;
            }
          case "0":
            if (startV == "0") {
              return document.calc.txt.value;
            } else {
              document.calc.txt.value += optV;
            }
            break;
          case ".":
            console.log(str);
            console.log(str.indexOf("."));
            if (startV == "" || str.indexOf(".") != -1) {
              return document.calc.txt.value;
            } else {
              return (document.calc.txt.value += optV);
            }
            break;
          case "=":
            try {
              if (str == "") {
                return document.calc.txt.value;
              } else {
                document.calc.txt.value = eval(calc.txt.value);
              }
            } catch (err) {
              document.calc.txt.value = err.message;
            }
            break;
          default:
            if (lastV == "-" || lastV == "+" || lastV == "*" || lastV == "/") {
                     document.calc.txt.value;
            } else {
                if(startV==''&&optV=='/'||startV==''&&optV=='*'){
                     console.log(1);
                     document.calc.txt.value;
                }else{
                    document.calc.txt.value += optV;
                }
         // console.log(str); //这里不能输出str str只是引用document.calc.txt.value的值，而不是这个对象的属性
              return document.calc.txt.value;
            }
        }
      }
    //javascript 代码实现