计算器（个位数运算，js实现）_个位数的加法计算器怎么写-CSDN博客

本文链接：https://blog.csdn.net/2201_75321887/article/details/129327540

运行效果

完整代码

<!DOCTYPE html>

<html>

 <head>

  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />

  <title></title>

  <style>

   #jisuanqi {

    width: 500px;

    border: 2px solid #ccc;

    margin: 0 auto;

   }

   #wenben {

    width: 100%;

    height: 150px;

    background-color: #ccc;

    margin: 0;

    line-height: 150px;

    font-size: 35px;

   }

   button {

    width: 120px;

    height: 100px;

    margin: 5px 1px;

    font-size: 30px;

    color: #10020281;

   }

   #btn {

    display: flex;

    justify-content: space-around;

    flex-wrap: wrap;

   }

  </style>

  <script>

//运算符前输入的数字

   var n1 = 0

//运算符后输入的数字

   var n2 = 0

//运算符

   var sym = ''

   var flag = 0

//最终结果

   var result = 0

//输入表达式

 function Num(number) {

    if (

     number == '+' ||

     number == '-' ||

     number == '×' ||

     number == '÷'

    ) {

     sym = number

     document.getElementById('wenben').innerHTML = n1 + sym

     flag = 1

    }

    if (flag == 0) {

     n1 = number

     document.getElementById('wenben').innerHTML = n1

    } else if (

     number != '+' &&

     number != '-' &&

     number != '×' &&

     number != '÷' &&

     flag == 1

    ) {

     n2 = number

     document.getElementById('wenben').innerHTML = n1 + sym + n2

    }

   }

//最终运算结果输出

function endResult() {

    if (sym == '+') {

     result = n1 + n2

    }

    if (sym == '-') {

     result = n1 - n2

    }

    if (sym == '×') {

     result = n1 * n2

    }

    if (sym == '÷') {

     result = n1 / n2

    }

    document.getElementById('wenben').innerHTML =

     n1 + sym + n2 + '=' + result

   }

//清除按键

function remove() {  document.getElementById('wenben').innerHTML = ''

    n1 = 0

    sym = 0

    n2 = 0

    result = 0

    flag = 0

   }

  </script>

 </head>

 <body>

  <div id="jisuanqi">

   <p id="wenben"></p>

   <div id="btn">

    <button onclick="Num(1)">1</button>

    <button onclick="Num(2)">2</button>

    <button onclick="Num(3)">3</button>

    <button onclick="remove()">C</button>

    <button onclick="Num(4)">4</button>

    <button onclick="Num(5)">5</button>

    <button onclick="Num(6)">6</button>

    <button onclick="Num('+')">+</button>

    <button onclick="Num(7)">7</button>

    <button onclick="Num(8)">8</button>

    <button onclick="Num(9)">9</button>

    <button onclick="Num('-')">-</button>

    <button onclick="Num('×')">×</button>

    <button onclick="Num(0)">0</button>

    <button onclick="Num('÷')">÷</button>

    <button onclick="endResult('=')">=</button>

   </div>

  </div>

 </body>

</html>