<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>奥里给！</title>
    <style type="text/css">
        .a {
            height: 100px;
            width: 450px;
            border: 3px solid black;
            background-color: beige;
            font-size: 50px;
        }
        
        #b {
            height: 570px;
            width: 450px;
            border: 2px solid black;
            background-color: pink;
            font-family: 隶书;
            font-size: 20px;
        }
        
        .c {
            height: 90px;
            width: 100px;
            border: 1px solid black;
            background-color: aquamarine;
            float: left;
            font-size: 60px;
            color: brown;
            margin: 8px;
            border-radius: 30px;
        }
        
        .d {
            height: 90px;
            width: 75px;
            border: 1px solid black;
            margin: 8px;
            float: left;
            background: sandybrown;
            font-size: 50px;
            color: brown;
            border-radius: 30px;
        }
        
        .e {
            height: 90px;
            width: 100px;
            border: 1px solid black;
            background-color: sandybrown;
            float: left;
            font-size: 45px;
            color: brown;
            margin: 8px;
            border-radius: 30px;
        }
        
        .e:hover {
            background: skyblue;
            color: white;
            transform: scale(1.08, 1.08);
        }
        
        .d:hover {
            background: skyblue;
            color: white;
            transform: scale(1.08, 1.08);
        }
        
        .c:hover {
            background: plum;
            color: aliceblue;
            transform: scale(1.08, 1.08);
        }
    </style>
</head>

<body>
    <center>
        <div class="a" id="resultInput">

        </div>
        <div id="b">
            <button class="c" onclick="printResultInput(this)" value="1">1</button>
            <button class="c" onclick="printResultInput(this)" value="2">2</button>
            <button class="c" onclick="printResultInput(this)" value="3">3</button><button class="d" onclick="printResultInput(this)" value="+">+</button>
            <button class="c" onclick="printResultInput(this)" value="4">4</button>
            <button class="c" onclick="printResultInput(this)" value="5">5</button>
            <button class="c" onclick="printResultInput(this)" value="6">6</button><button class="d" onclick="printResultInput(this)" value="-">-</button>
            <button class="c" onclick="printResultInput(this)" value="7">7</button>
            <button class="c" onclick="printResultInput(this)" value="8">8</button>
            <button class="c" onclick="printResultInput(this)" value="9">9</button><button class="d" onclick="printResultInput(this)" value="*">*</button>
            <button class="e" onclick="printResultInput(this)" value=".">.</button>
            <button class="c" onclick="printResultInput(this)" value="0">0</button>
            <button class="e" onclick="count()">=</button><button class="d" onclick="printResultInput(this)" value="/">/</button>
            <button class="e" onclick="tuige()">👈</button>
            <button class="e" onclick="tuige()">👈</button>
            <button class="e" onclick="tuige()">👈 </button><button class="d" onclick="clearNum()">AC</button> 比努力更可怕的是坚持！
        </div>
    </center>
    <script type="text/javascript">
        /*printResultInput(this),this可以理解为这个函数在这个按钮的功能 value是赋值*/

        /*将点击的按钮值显示在resultInput上*/
        function printResultInput(l) { /*？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？？*/
            document.getElementById("resultInput").innerHTML += l.value;
        }


        /* 四则运算方法 */
        function count() {
            var countText = document.getElementById("resultInput").innerHTML;
            var operator, result;
            if (countText.indexOf("+") !== -1)
            /*indexOf() 可以显示（）里的元素的位置，显示的的是数字。indexOf() 方法对大小写敏感！

注释：如果要检索的字符串值没有出现，则该方法返回 -1。。。。。。。在这里用indexof搜索，如果找到了indexof就会是
一个正数如果没有早到的话就是-1，countText.indexOf代表的是cunttext的indexof意思实在这里寻找，给indexof
定义一个区域，如果不是-1的话operator就保存了一个加号*/
            {
                operator = "+";
            } else if (countText.indexOf("-") !== -1) {
                operator = "-";
            } else if (countText.indexOf("*") !== -1) {
                operator = "*";
            } else if (countText.indexOf("/") !== -1) {
                operator = "/";
            }
            var num1 = countText.substring(0, countText.indexOf(operator));
            /*substring() 方法用于提取字符串中介于两个指定下标之间的字符。
               countText.substring表示在counttext中寻找，0是第一个字符，countText.indexOf(operator)应该是从0字符到加号前面的那个字符，，，，这么写的
               应该是counttext里indexof里的参数operator，不然直接找oper找不到，因为oper是个字符串屏幕上没有，屏幕上只有=-*那代表的是保存在oper的的数我感觉
               应该就是参数，想要找到他要找到他的父元素也就是定义它的函数也就是indexof
               */
            var num2 = countText.substring(countText.indexOf(operator) + 1);
            if (operator == "+") {
                result = parseFloat(num1) + parseFloat(num2);
            } else if (operator == "-") {
                result = parseFloat(num1) - parseFloat(num2);
            } else if (operator == "*") {
                result = parseFloat(num1) * parseFloat(num2);
            } else if (operator == "/") {
                result = parseFloat(num1) / parseFloat(num2);
            }
            document.getElementById("resultInput").innerHTML = result;
        }

        function tuige() {
            var t = counttext.substring(0, countText.parseFloat(num2) - 1);
            document.getElementById("resultInput").innerHTML = t;

        }

        /*清零*/
        function clearNum() {
            document.getElementById("resultInput").innerHTML = '';
        }
        //退位
        function tui() {

        }
        //把按纽上的数字显示到上面的盒子中
        //获取屏幕中的元素
        //1判断屏幕上的是+-*/哪一个然后把他保存到一个变量中用到了indexOf()函数没有()里的字符串时显示-1
        //2获取=-*/前面和后面额元素然后分别把他们保存在两个变量中
        //把2中的两个元素字符串类型变成浮点型/1最后利用这三个变量（2中的两个变量1中的一个变量）进行计算，把结果保存在一个变量中
        //把计算结果的变量显示在屏幕中
    </script>

</body>

</html>

运行结果