天天看点

简单的计算器编码

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <script type="text/javascript" src="../Scripts/jquery-1.8.2.min.js"></script>

    <script type="text/javascript" src="../Scripts/data.js"></script>

    <script type="text/javascript" src="../Scripts/common.js"></script>

    <title>计算器</title>

    <style type="text/css">

        body {

            width: 100%;

            height: 100%;

            font-family: Microsoft YaHe;

            font-size: 11px;

        }

        label {

            font-family: Microsoft YaHe;

            font-size: 12px;

        }

        input[type="button"] {

            width: 100%;

            height: 100%;

            border: 0px;

            background-color: #0A78FF;

            background-image: url(1.png);

            background-repeat: repeat-x;

        }

            input[type="button"]:hover {

                background-image: url(1s.png);

            }

        #zero {

            width: 100%;

            height: 100%;

        }

        #equre {

            width: 100%;

            height: 100%;

            background-image: url(2.png);

        }

            #equre:hover {

                background-image: url(2s.png);

            }

        td {

            border: 1px gray solid;

        }

        .inner td {

            border: 0px;

            width: 46px;

        }

    </style>

</head>

<body>

    <table id="er" style="background-color: #0A78FF;">

        <tr>

            <td colspan="9" style="height:50px;text-align:right;vertical-align:bottom">

                <input type="txet" id="inp1" style="width: 400px; height: 50px;" disabled />

            </td>

        </tr>

        <tr>

            <td colspan="9">

                <table class="inner" frame="void" rules="none">

                    <tr>

                        <td colspan="1">0000</td>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                    </tr>

                    <tr>

                        <td colspan="4">63</td>

                        <td colspan="3">47</td>

                        <td>32</td>

                    </tr>

                    <tr>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                        <td>0000</td>

                    </tr>

                    <tr>

                        <td colspan="4">31</td>

                        <td colspan="3">15</td>

                        <td>0</td>

                    </tr>

                </table>

            </td>

        </tr>

        <tr>

            <td rowspan="3">

                <input type="radio" name="jinzhi" id="shiliu"/><label>十六进制</label><br />

                <input type="radio" name="jinzhi" checked="checked"/><label>十进制</label><br />

                <input type="radio" name="jinzhi" id="ba"/><label>八进制</label><br />

                <input type="radio" name="jinzhi" id="er"/><label>二进制</label>

            </td>

            <td></td>

            <td><input type="button" value="Mod" /></td>

            <td><input type="button" value="A" /></td>

            <td><input type="button" value="MC"/></td>

            <td><input type="button" value="MR" /></td>

            <td><input type="button" value="MS" /></td>

            <td><input type="button" value="M+" /></td>

            <td><input type="button" value="M-" /></td>

        </tr>

        <tr>

            <td><input type="button" value="(" οnclick="yi(this)"/></td>

            <td><input type="button" value=")"οnclick="yi(this)" /></td>

            <td><input type="button" value="B" /></td>

            <td><input type="button" value="←" /></td>

            <td><input type="button" value="CE" οnclick="qingchua()"/></td>

            <td><input type="button" value="C" /></td>

            <td><input type="button" value="+/-" /></td>

            <td><input type="button" value="√" /></td>

        </tr>

        <tr>

            <td><input type="button" value="RoL" /></td>

            <td><input type="button" value="RoR" /></td>

            <td><input type="button" value="C" /></td>

            <td><input type="button" value="7" οnclick="yi(this)"/></td>

            <td><input type="button" value="8" οnclick="yi(this)"/></td>

            <td><input type="button" value="9" οnclick="yi(this)"/></td>

            <td><input type="button" value="/" οnclick="yi(this)"/></td>

            <td><input type="button" value="%" /></td>

        </tr>

        <tr>

            <td rowspan="3">

                <input type="radio" name="zi" checked="checked"/><label>四字</label><br />

                <input type="radio" name="zi" /><label>双字</label><br />

                <input type="radio" name="zi" /><label>字</label><br />

                <input type="radio" name="zi" /><label>字节</label>

            </td>

            <td><input type="button" value="Or" /></td>

            <td><input type="button" value="Xor" /></td>

            <td><input type="button" value="D" /></td>

            <td><input type="button" value="4" οnclick="yi(this)" /></td>

            <td><input type="button" value="5" οnclick="yi(this)" /></td>

            <td><input type="button" value="6" οnclick="yi(this)"/></td>

            <td><input type="button" value="*" οnclick="yi(this)"/></td>

            <td><input type="button" value="1/x" /></td>

        </tr>

        <tr>

            <td><input type="button" value="Lsh" /></td>

            <td><input type="button" value="Rsh" /></td>

            <td><input type="button" value="E" /></td>

            <td><input type="button" value="1" οnclick="yi(this)"/></td>

            <td><input type="button" value="2" οnclick="yi(this)"/></td>

            <td><input type="button" value="3" οnclick="yi(this)"/></td>

            <td><input type="button" value="-" οnclick="yi(this)"/></td>

            <td rowspan="2"><input type="button" id="equre" value="=" οnclick="jieguo()"/></td>

        </tr>

        <tr>

            <td><input type="button" value="Not" /></td>

            <td><input type="button" value="And" /></td>

            <td><input type="button" value="F" /></td>

            <td colspan="2"><input id="zero" type="button" value="0" οnclick="yi(this)"/></td>

            <td><input type="button" value="." οnclick="yi(this)" /></td>

            <td><input type="button" value="+" οnclick="yi(this)"/></td>

        </tr>

    </table>

    <script type="text/javascript">

        function yi(r) {

            //r是input r.value 取值

            //var val= r.value;

            //id的数据=ID数据拼接参数的数据

            inp1.value = inp1.value + r.value;

            //id 定到 文本

            //var f = document.getElementById("inp1");

            //f.value 旧值 加上 r.value 取值 等于f.value

            //f.value = f.value + val;

        }

        function jieguo() {

            //id 定到 文本 取值

            var shuju = document.getElementById("inp1").value;

            //str 等于 文本值

            var str = shuju;

            //调用calc

            alert(calc(str));

        }

        function calc(expr) {

            //在函数calc内查找expr第一个右括号")";

            var xiabiao1 = expr.indexOf(")");

            if (xiabiao1 == -1) {

                return calcout(expr);

            }

            //找到expr第一个右括号前面紧临的左括号"(";

            //找到 第一个右括号 前面 紧临

            var xiabiao2 = expr.lastIndexOf("(", xiabiao1);

            //声明一个变量subexpr,截取右括号和左括号找到括号中间的字符串并赋值给subexpr

            var subexpr = expr.substring(xiabiao2 + 1, xiabiao1);

            var l = expr.substring(0, xiabiao2);//截取左括号之前的数

            //调用

            var m = calcout(subexpr);//括号里的数

            var r = expr.substring(xiabiao1 + 1);//截取右括号之后的数

            return calc(l + m + r);//拼接式子

        }

        function isNum(cr) {

            return "0123456789".indexOf(cr) > -1;

        }

        //bijiao  比较符号的优先级

        function bijiao(bijiao1, bijiao2) {

            if (bijiao1 == -1) {

                return bijiao2;

            }

            if (bijiao2 == -1) {

                return bijiao1;

            }

            if (bijiao1 > bijiao2) {

                return bijiao2;

            } else {

                return bijiao1;

            }

        }

        //声明一个函数calcout,接收一个参数expr2,调用calcout;

        function calcout(expr2) {

            //在calcout内,查找expr2中的符号"*","/"如果没有就查找符号"+","-"

            var index =bijiao(expr2.indexOf("*"),expr2.indexOf("/"));//查找expr2中的符号"*"

            if(index == -1) {

                index =bijiao(expr2.indexOf("+"),expr2.indexOf("-"));//就查找符号"+"

            }if (index == -1) {

                //return expr2;

                var f = document.getElementById("inp1").value = "";

                var w = document.getElementById("inp1");

                w.value = expr2;

                if (expr2 == "NaN") {

                    w.value = 0;

                    return 0;

                }

                return (expr2);

            }

            //查找字符串中的乘号除号,加号减号,取出加号前面和后面的数字

            var num1 = "";

            var i = index - 1;

            for (; i >= 0; i--) {//循环

                var numi = expr2.charAt(i);

                if (isNum(numi) || "." == numi) {

                    num1 = numi + num1;// isNum 返回继续循环 或 遇见小数点计算

                    continue;

                }

                break;

            }

            i++;

            var num2 = "";

            var j = index + 1;

            for (; j < expr2.length; j++) {//循环

                var numi = expr2.charAt(j);

                if (isNum(numi) || "." == numi) {

                    num2 = num2 + numi;// isNum 返回继续循环 或 遇见小数点计算

                    continue;

                }

                break;

            }

            var newnum = calc2(num1 - 0, expr2.charAt(index), num2 - 0);//调用 计算

            return calcout(expr2.substring(0, i) + newnum + expr2.substring(j));//calcout

        }

        //新建一个函数,有3个参数,分别是num1,calc,num2。num1和num2是数字,calc是符号,有可能的符号包括+-*/,根据calc不同分别返回num1和num2的和差积商。

        function calc2(num1, calc, num2) {

            if (calc == "+") {

                return num1 + num2;

            }

            else if (calc == "-") {

                return num1 - num2;

            }

            else if (calc == "*") {

                return num1 * num2;

            }

            else if (calc == "/") {

                return num1 / num2;

            }

            return 0;

        }

        function qingchua() {

            var qc = document.getElementById("inp1").value="";

        }

    </script>

</body>

</html>

继续阅读