如何实现程序员计算器的功能

Question

现在只能实现十进制的计算，我想实现程序员计算器的功能

问题相关代码，请勿粘贴截图

    <title>计算器</title>
    <style>
        * {
            border: none;
            margin: 0 auto;
            padding: 0;
        }

        body {
            padding: 20px;
            font-family: Arial;
        }

        td input:hover {
            background-color: rgb(192, 192, 192);
        }

        .calc-wrap {
            width: 300px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }


        .calc-operation {
            width: 100%;
            border-collapse: collapse;
        }

        .calc-in-out {
            width: 100%;
            padding: 10px 20px;
            text-align: right;
            box-sizing: border-box;
            background-color: rgba(250, 250, 250, .9);
        }

        .calc-in-out p {
            overflow: hidden;
            margin: 5px;
            width: 100%;
        }

        .calc-history {
            margin-left: -20px;
            font-size: 18px;
            color: #bbb;
            border-bottom: 1px dotted #ddf;
            min-height: 23px;
        }

        .calc-in,
        .calc-out {
            font-size: 20px;
            color: #888;
            line-height: 39px;
            min-height: 39px;
        }

        .calc-in {
            color: #888;
        }

        .calc-out {
            color: #ccc;
        }

        .calc-in.active,
        .calc-out.active {
            font-size: 20px;
            color: #666;
        }

        .calc-out.active {
            text-align: left;
            height: 50%;
        }

        #result1 {
            font-size: 20px;
            width: 205px;
            padding-left: 10px;
        }

        #result2 {
            font-size: 20px;
            width: 205px;
            padding-left: 10px;
        }

        #result3 {
            font-size: 20px;
            width: 205px;
            padding-left: 10px;
        }

        #result4 {
            font-size: 20px;
            width: 205px;
            padding-left: 15px;
        }

        .calc-operation td input {
            margin: 0 auto;
            padding: 10px;
            width: 99%;
            text-align: center;
            border: 1px solid #ddd;
            font-size: 26px;
            color: #888;
            cursor: default;
        }

        .calc-operation td input:active {
            background-color: #ddd;
        }

        .calc-operation .cls {
            color: #ee8956;
        }

        .calc-operation .eq {
            color: rgb(255, 255, 255);
            background-color: #3649dc;
        }
    </style>
    <!--声明js代码-->
    <script type="text/javascript" src="../js/jquery-3.6.0.min.js">
    </script>
    <script>
        window.onload = function () {
            var t1 = document.getElementById('result1');
            var t2 = document.getElementById('result2');
            var t3 = document.getElementById('result3');
            var t4 = document.getElementById('result4');
            var num = {
                //数字0-9
                num1: document.getElementById('num1'),
                num2: document.getElementById('num2'),
                num3: document.getElementById('num3'),
                num4: document.getElementById('num4'),
                num5: document.getElementById('num5'),
                num6: document.getElementById('num6'),
                num7: document.getElementById('num7'),
                num8: document.getElementById('num8'),
                num9: document.getElementById('num9'),
                num0: document.getElementById('num0'),
            };
            var symbol = {
                divide: document.getElementById('divide'),//除
                multiply: document.getElementById('multiply'),//乘
                subtract: document.getElementById('subtract'),//减
                add: document.getElementById('add'),//加
                remainder: document.getElementById('remainder'),//取余
                reset: document.getElementById('reset'),//归零
                back: document.getElementById('back'),//回退
                plus: document.getElementById('plus'),//正负号
                equal: document.getElementById('equal'),//等于号
                point: document.getElementById('point'),//小数点
            };
            var n = [];//储存符号
            var sum = '';//储存前一个输入的数字

            function jisuan1(ac) {
                for (var i in symbol) {
                    symbol[i].onclick = function () {

                        switch (this.value) {
                            case '.':
                                if (ac.value !== "0" && this.value == ".") {
                                    //文本框里数字不为零，并且输入小数点
                                    if (ac.value.indexOf(".") !== -1) {
                                        // 处理点重复的问题；文本框里面有小数点
                                        ac.value = ac.value;
                                    } else {
                                        ac.value += this.value;
                                    }
                                } else {
                                    ac.value += this.value;
                                }
                                break;
                            case '+':
                                if (n != '+') {
                                    n = this.value; //储存符号
                                    sum = ac.value;  //储存输入的数字
                                    ac.value = '0';  //清0
                                }
                                break;
                            case '-':
                                if (n != '-') {
                                    n = this.value;
                                    sum = ac.value;
                                    ac.value = '0';
                                }
                                break;
                            case '×':
                                if (n != '×') {
                                    n = this.value;
                                    sum = ac.value;
                                    ac.value = '0';
                                }
                                break;
                            case '÷':
                                if (n != '÷') {
                                    n = this.value;
                                    sum = ac.value;
                                    ac.value = '0';
                                }
                                break;
                            case '%':
                                if (n != '%') {
                                    n = this.value;
                                    sum = ac.value;
                                    ac.value = '0';
                                }
                                break;
                            case '=':
                                switch (n) {
                                    case '+':
                                        ac.value = parseFloat(sum) + parseFloat(ac.value); //输出结果
                                        n = ''; //符号清空
                                        break;
                                    case '-':
                                        ac.value = parseFloat(sum) - parseFloat(ac.value);
                                        n = '';
                                        break;
                                    case '×':
                                        ac.value = parseFloat(sum) * parseFloat(ac.value);
                                        n = '';
                                        break;
                                    case '÷':
                                        if (parseFloat(ac.value) == 0) {
                                            alert('除数不能为0');
                                            ac.value = 0;
                                        } else {
                                            ac.value = parseFloat(sum) / parseFloat(ac.value);
                                            n = '';
                                        }
                                        break;
                                    case '%':
                                        ac.value = parseFloat(sum) % parseFloat(ac.value);
                                        n = '';
                                        break;
                                }
                                break;
                            case '←':
                                if (ac.value.length > 1) {
                                    ac.value = ac.value.substr(0, ac.value.length - 1);
                                } else {
                                    ac.value = '0';
                                }
                                break;
                            case 'C':
                                ac.value = 0;
                                break;
                            case '+/-':
                                ac.value = ac.value * -1;
                                break;
                        }

                    }
                }
                return ac;
            }

            //调用函数
            jisuan1(t2);

            //封装，点击数字输入到文本域中
            function number1(numx1) {
                if (t1.value == '0') {
                    t1.value = numx1;
                } else {
                    t1.value += numx1;
                }
            }

            function number2(numx2) {
                if (t2.value == '0') {
                    t2.value = numx2;
                } else {
                    t2.value += numx2;
                }
            }

            function number3(numx3) {
                if (t3.value == '0') {
                    t3.value = numx3;
                } else {
                    t3.value += numx3;
                }
            }

            function number4(numx4) {
                if (t4.value == '0') {
                    t4.value = numx4;
                } else {
                    t4.value += numx4;
                }
            }

            //输入数字
            num.num1.onclick = function () {
                number1(this.value);
                number2(this.value);
                number3(this.value);
                number4(this.value);
            }
            num.num2.onclick = function () {
                number1(this.value);
                number2(this.value);
                number3(this.value);
                number4(this.value);
            }
            num.num3.onclick = function () {
                number1(this.value);
                number2(this.value);
                number3(this.value);
                number4(this.value);
            }
            num.num4.onclick = function () {
                number1(this.value);
                number2(this.value);
                number3(this.value);
                number4(this.value);
            }
            num.num5.onclick = function () {
                number1(this.value);
                number2(this.value);
                number3(this.value);
                number4(this.value);
            }
            num.num6.onclick = function () {
                number1(this.value);
                number2(this.value);
                number3(this.value);
                number4(this.value);
            }
            num.num7.onclick = function () {
                number1(this.value);
                number2(this.value);
                number3(this.value);
                number4(this.value);
            }
            num.num8.onclick = function () {
                number1(this.value);
                number2(this.value);
                number3(this.value);
                number4(this.value);
            }
            num.num9.onclick = function () {
                number1(this.value);
                number2(this.value);
                number3(this.value);
                number4(this.value);
            }
            num.num0.onclick = function () {
                number1(this.value);
                number2(this.value);
                number3(this.value);
                number4(this.value);
            }

        }


    </script>


    <title>Document</title>
</head>

<body>
    <!-- 计算器 -->
    <div class="calc-wrap">
        <div class="calc-in-out">
            <!-- 上一条运算记录 -->
            <p class="calc-history"></p>
            <!-- 输入的数据 -->
            <p class="calc-in"></p>
            <!-- 输出的运算结果 -->
            <div class="calc-out active">HEX<input type="text" id="result1" value="0" disabled /></div>
            <div class="calc-out active">DEC<input type="text" id="result2" value="0" disabled /></div>
            <div class="calc-out active">OCT<input type="text" id="result3" value="0" disabled /></div>
            <div class="calc-out active">BIN<input type="text" id="result4" value="0" disabled /></div>
        </div>
        <table class="calc-operation">
            <tr>
                <td><input class="cls" type="button" id="reset" value="C" /></td>
                <td><input type="button" id="back" value="←" /></td>
                <td><input type="button" id="remainder" value="%" /></td>
                <td><input type="button" id="divide" value="÷" /></td>
            </tr>
            <tr>
                <td><input type="button" id="num7" value="7" /></td>
                <td><input type="button" id="num8" value="8" /></td>
                <td><input type="button" id="num9" value="9" /></td>
                <td><input type="button" id="multiply" value="×" /></td>
            </tr>
            <tr>
                <td><input type="button" id="num4" value="4" /></td>
                <td><input type="button" id="num5" value="5" /></td>
                <td><input type="button" id="num6" value="6" /></td>
                <td><input type="button" id="subtract" value="-" /></td>
            </tr>
            <tr>
                <td><input type="button" id="num1" value="1" /></td>
                <td><input type="button" id="num2" value="2" /></td>
                <td><input type="button" id="num3" value="3" /></td>
                <td><input type="button" id="add" value="+" /></td>
            </tr>
            <td><input type="button" id="plus" value="+/-" /></td>
            <td><input type="button" id="num0" value="0" /></td>
            <td><input type="button" id="point" value="." /></td>
            <td><input class="eq" type="button" id="equal" value="=" /></td>
        </table>
    </div>
</body>

</html>

我想 实现程序员计算器的功能对其他进制同样加减乘除

Answer 1

这个问题问得，还得给你这个程序跑起来看看嘛？ 建议自己跑跑或者网上搜一下资料很多，逻辑很简单，遇到具体报错再来提问