jQuery简易计算器

 首先，写出html结构

  <div id="box">
        <input type="text" value="0" id="result" readonly="readonly" />
        <button class="btn" onclick="clean()">C</button>
        <button class="btn" onclick="negation()">+/-</button>
        <button class="btn" onclick="symbol('x')">x</button>
        <button class="btn" onclick="symbol('÷')">÷</button>
        <button class="btn" onclick="input('1')">1</button>
        <button class="btn" onclick="input('2')">2</button>
        <button class="btn" onclick="input('3')">3</button>
        <button class="btn" onclick="symbol('-')">-</button>
        <button class="btn" onclick="input('4')">4</button>
        <button class="btn" onclick="input('5')">5</button>
        <button class="btn" onclick="input('6')">6</button>
        <button class="btn" onclick="symbol('+')">+</button>
        <button class="btn" onclick="input('7')">7</button>
        <button class="btn" onclick="input('8')">8</button>
        <button class="btn" onclick="input('9')">9</button>
        <button class="btn" onclick="symbol('%')">%</button>
        <button class="btn" onclick="input('0')">0</button>
        <button class="btn" onclick="point()">.</button>
        <button class="btn" onclick="sum()">=</button>
    </div>

为其添加样式

    body {
            margin: 50px;
        }
        
        #box {
            border: 1px solid #ccc;
            border-radius: 4px;
            width: 175px;
            height: 285px;
            padding: 10px;
        }
        
        #result {
            width: 161px;
            margin-bottom: 10px;
            height: 30px;
            border: 1px solid #cccccc;
            border-radius: 2px;
            background-color: white;
            color: #666666;
            padding: 0 5px;
            text-align: right;
        }
        
        #box>.btn {
            width: 40px;
            height: 40px;
            border: 1px solid #cccccc;
            border-radius: 2px;
            cursor: pointer;
            background-color: white;
            font-weight: bold;
            color: #666;
            margin-bottom: 10px;
        }
        
        #box>.btn:hover {
            color: white;
            background-color: #666;
        }
        
        #box>.btn:last-of-type {
            width: 85px;
        }

jquery功能实现

 <script src="jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //输入数值
        function input(param) {
            let inputVal = $("#result").val();
            let lastNum = getlastNum(inputVal);
            if (parseInt(lastNum) === 0 && !/0\./.test(lastNum)) { //第一个数是0，替代,但是要排除0.的情况
                $("#result").val(inputVal.length > 1 ? (inputVal.substring(0, inputVal.length - 1) + param) : param);
            } else { //第一个数不是0，拼接
                $("#result").val(inputVal + param);
            }
        }
        //输入运算符
        function symbol(param) {
            let inputVal = $("#result").val();
            $("#result").val(inputVal + " " + param + " ");
        }
        //清空
        function clean() {
            $("#result").val("0")
        }
        //取到输入的最后一个数
        function getlastNum(str) {
            return str.substring(str.lastIndexOf(" "));;
        }
        //输入.
        function point() {
            let inputVal = $("#result").val();
            let lastNum = getlastNum(inputVal);
            if (lastNum.indexOf('.') > -1) { //不允许存在多个点
                return
            } else {
                $("#result").val(inputVal + '.');
            }
        }
        //正负号
        function negation() {
            let inputVal = $("#result").val();
            let lastNum = getlastNum(inputVal).trim();
            let prevNum = inputVal.substring(0, inputVal.lastIndexOf(" "));
            if (lastNum.indexOf('-') == -1) {
                lastNum = " -" + lastNum;
            } else {
                lastNum = " " + lastNum.trim().substring(1);
            }
            $("#result").val(prevNum + lastNum);
        }
        //计算结果
        function sum() {
            try {
                //将x÷运算符转换成*/
                let inputVal = $("#result").val().replace("x", "*").replace("÷", "/");
                let result = eval(inputVal);
                $("#result").val(result);
            } catch (e) {
                alert("运算异常");
                $("#result").val("0");
            }

        }
    </script>