javescript第六天

用js做一个简易计算器
html样式

body>
    <table align="center" width="300px" border="0" cellspacing="1" cellpadding="0">
        <caption>超级计算器</caption>
        <tr>
            <td colspan="3">
                <input id="result" type='text' readonly placeholder="0.0">
            </td>
        </tr>
        <tr>
            <td><button onclick="cal(1)">1</button></td>
            <td><button onclick="cal(2)">2</button></td>
            <td><button onclick="cal(3)">3</button></td>
        </tr>
        <tr>
            <td><button onclick="cal(4)">4</button></td>
            <td><button onclick="cal(5)">5</button></td>
            <td><button onclick="cal(6)">6</button></td>
        </tr>
        <tr>
            <td><button onclick="cal(7)">7</button></td>
            <td><button onclick="cal(8)">8</button></td>
            <td><button onclick="cal(9)">9</button></td>
        </tr>
        <tr>
            <td colspan="2"><button style="width: 202px" onclick="cal(0)">0</button></td>
            <td><button onclick="cal('.')">.</button></td>
        </tr>
        <tr>
            <td><button onclick="cal('+')">+</button></td>
            <td><button onclick="cal('-')">-</button></td>
            <td><button onclick="cal('*')">*</button></td>
        </tr>
        <tr>
            <td><button onclick="cal('/')">/</button></td>
            <td><button onclick="cal('%')"> %</button></td>
            <td rowspan="2"><button style="height: 44px" onclick="show()">=</button></td>
        </tr>
        <tr>
            <td><button onclick="show('<--')">
                    <-- </button>
            </td>
            <td><button onclick="clean()">C</button></td>
        </tr>
    </table>
</body>

用了表单元素

css样式

<style>
        button {
            width: 100px;
        }

        td {
            text-align: center;
        }

        * {
            outline: none;
        }

        input[type='text'] {
            width: 300px;
            /*direction: rtl;*/
            text-align: right;
        }
    </style>

我的思路是：先获取每次点击的时候获取点击的value，然后判断运算符是什么，在进行什么运算
第一步：第一一个变量，将被点击的内容写入输入框中

var rst = document.getElementById("result");
    //将被点击的内容写入输入框中
    function cal(str) {
        rst.value += str;
    }

第二步：字符串获取每一个字符，分别统计运算符前的数字和运算符后的数字，这个要用到判断。

//计算
    function show() {
        var str = rst.value;
        var op1 = "";//运算符前的数字
        var op2 = "";//保存运算符后的数字
        var flag = false;//没有碰到运算符       true  遇到运算符
        var tag = "";//运算符
        // 思路，遍历字符串获取每一个字符，分别统计运算符前的数字和运算符后的数字
        // 12+89 
        for (var i = 0; i < str.length; i++) {
            if (str[i] >= '0' && str[i] <= '9') {//数字
                if (flag) {
                    op2 += str[i];//   运算符后的数字
                } else {
                    op1 += str[i];      //运算符前的数字
                }
            } else {//符号                   + - * / %
                flag = true;
                tag = str[i];
            }
        }
        fn(op1, op2, tag);
    }

    //根据不同的运算符，来进行不同的运算
    function fn(op1, op2, tag) {
        switch (tag) {
            case "+":
                rst.value = parseFloat(op1) + parseFloat(op2);
                break;
            case "-":
                rst.value = parseFloat(op1) - parseFloat(op2);
                break;
            case "*":
                rst.value = parseFloat(op1) * parseFloat(op2);
                break;
            case "%":
                rst.value = parseFloat(op1) % parseFloat(op2);
                break;
            case "/":
                rst.value = parseFloat(op1) / parseFloat(op2);
                break;
            default:
                rst.value = parseFloat(op1) * parseFloat(op2);
                break;
        }
    }

最后让显示栏重新显示0.0

function clean() {
        console.log('111');
        rst.value = '';
    }

主要是点击事件怎么显示，怎么判断是数字还是运算符。