如何写一个简易计算器_怎么写一个计算器-CSDN博客

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
   <style>
      * {
  margin: 0;
  padding: 0;
}
ul,
li {
  list-style: none;
}
.box {
  margin-top: 100px;
  width: 440px;
  background-color: #ebebeb;
  margin: 0 auto;
  padding: 5px;
}
.inp-box {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 5px;
}
.inp-box .inp {
  width: 100%;
  height: 45px;
  border: none;
  text-indent: 20px;
  font-size: 25px;
  outline: none;
}
.list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.list li {
  user-select: none;
  width: 100px;
  height: 65px;
  text-align: center;
  line-height: 65px;
  font-size: 20px;
  background-color: #fff;
  margin-bottom: 10px;
  cursor: pointer;
}

      </style>
</head>

<body>
    <div class="box">

        <div class="inp-box">
            <input id="inp" class="inp" type="text" placeholder="简单计算器">
        </div>
        <ul class="list">
            <li onclick="clearInp()">C</li>
            <li>CE</li>
            <li onclick="clickNumber('%')">%</li>
            <li onclick="clickNumber('/')">/</li>
            <li onclick="clickNumber(7)">7</li>
            <li onclick="clickNumber(8)">8</li>
            <li onclick="clickNumber(9)">9</li>
            <li onclick="clickNumber('*')">x</li>

            <li onclick="clickNumber(4)">4</li>
            <li onclick="clickNumber(5)">5</li>
            <li onclick="clickNumber(6)">6</li>
            <li onclick="clickNumber('-')">-</li>
            <li onclick="clickNumber(1)">1</li>
            <li onclick="clickNumber(2)">2</li>
            <li onclick="clickNumber(3)">3</li>
            <li onclick="clickNumber('+')">+</li>

            <li onclick="clickNumber(0)" style="width: 210px;">0</li>
            <li onclick="clickNumber('.')">.</li>
            <li onclick="compute()">=</li>
        </ul>
    </div> 
    <script>
              // 功能1: 点击数字或者算术运算符, 输入框显示计算式子
// 点击数字或其他运算符
var str = '';
var $inp = document.querySelector('#inp');  
function clickNumber(num) { 
    // 获取最后一个字符
    var last = str[str.length-1];
    // 判断最后一个是不是数字,notNumber1为true说明最后一个是非数字
    var notNumber1 = last === '+' || last === '-' || last === '*' ||last === '/' || last === '%' || last === '.';
    // 判断现在输入的是不是数字,notNumber2为true说明现在输入的非数字
    var notNumber2 =  num === '+' || num === '-' || num === '*' ||num === '/' || num === '%' || num === '.'; 
    // 如果最后一个和现在输入的都是非数字, 就不拼接字符串
    // if(notNumber1 && notNumber2) {
    //     return false;
    // } else {
    //     str += num; 
    //     $inp.value = str; 
    // } 
    // 以上代码等同于下面的代码
    if(!(notNumber1 && notNumber2)) {
        str += num; 
        $inp.value = str; 
    }
   
}

// 功能2: 点击等于号,实现计算功能
function compute() {
 var result = eval(str); 
 // 将全局变量str清空
 str = ''; 
 $inp.value = result;
}

// 功能3: 清除功能
function clearInp() {
    // str置空
    str = '';
    // 输入框置空
    $inp.value = '';
}
              </script> 
</body> 
</html>