js+一点jq实现计算器

用js（jq） 计算器功能，我是仿照windows里的计算器做的，

可以实现连续计算，

里面用到了jq 主要是

先看看行动界面：

主要的js代码：

<script src="JS/jquery-1.2.6.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var result;
        var num1;
        var clear = true;
        var calchar = null;
        var ep_clear = false;

        //计算结果
        function CalData() {

            if (calchar != null) {

                var currentdate = $("#Text1").val();

                switch (calchar) {
                    case "+":
                        result = parseFloat(num1) + parseFloat(currentdate);
                        break;
                    case "-": result = parseFloat(num1) - parseFloat(currentdate);
                        break;
                    case "*": result = parseFloat(num1) * parseFloat(currentdate);
                        break;
                    case "/": result = parseFloat(num1) / parseFloat(currentdate);
                        break;
                }
                return result;
            }

        }
        //加载事件
        $(document).ready(
        function () {
            //CSS
            $(":input[type='button']").addClass("button");
            $("#Text1").addClass("text");
            $("table").addClass("table");

            //锁定焦点
            $("#Text1").focus();
            //注册事件
            $("input[type='button'][name='btn']").bind("click", function () {

                if (calchar != null & clear == true) {
                    clear = false;
                    $("#Text1").val("");
                }
                //等号完之后的清空
                if (ep_clear == true) {
                    $("#Text1").val("");
                    ep_clear = false;
                }

                //清空时的判断
                var va = $("#Text1").val();
                if (va == 0) {
                    $("#Text1").val(this.value);
                }
                else {
                    $("#Text1").val(va + this.value);
                }
            });

            //计算符号
            $("input[type='button'][name='calchar']").bind("click", function () {

                if ($("#Text1").val().length > 0) {
                    $("#Text1").val(CalData());
                    clear = true;
                    calchar = this.value; //保存当前的计算符
                    num1 = $("#Text1").val(); //保存当前输入的值
                }

            });
            //等号处理
            $("input[type='button'][value='=']").bind("click", function () {

                if ($("#Text1").val().length > 0) {
                    $("#Text1").val(CalData());
                    ep_clear = true;
                    calchar = null;
                    num1 = result;
                }

            });
            //处理清空
            $("input[type='button'][value='C']").bind("click", function () {
                result = 0;
                num1 = 0;
                calchar = null;
                $("#Text1").val("0");

            });
            //处理小数点
            $("input[type='button'][name='dot']").bind("click", function () {
                var res = $("#Text1").val();
                if (res.indexOf(".") < 0) {
                    $("#Text1").val(res + this.value);
                }
            });
            //处理后退键
            $("input[type='button'][name='spaceback']").bind("click", function () {
                var res = $("#Text1").val().toString();
                if (res.length >= 1) {
                    if (res.length == 1) {
                        $("#Text1").val("0");
                    } else {
                        res = res.substr(0, res.length - 1);
                        $("#Text1").val(res);
                    }
                }
            });
            //计算根号
            $("input[type='button'][name='genhao']").bind("click", function () {
                var res = $("#Text1").val();
                if (res != 0) {
                    $("#Text1").val(Math.sqrt(res));
                }
            });
            //计算倒数
            $("input[type='button'][name='daoshu']").bind("click", function () {
                var res = $("#Text1").val();
                if (res != 0) {
                    $("#Text1").val(1.0 / res);
                }
            });
            //计算平方
            $("input[type='button'][name='pingfang']").bind("click", function () {
                var res = $("#Text1").val();
                if (res!=0 ) {
                    $("#Text1").val(res * res);
                }
            });
            //处理正负号
            $("input[type='button'][value='+/-']").bind("click", function () {
                var res = $("#Text1").val();
                var sub;
                if (res.length > 0 & res[0]!="0") {
                    if (res[0] == "-") {
                        sub = res.substr(1, res.length - 1);
                        $("#Text1").val(sub);
                    }
                    else {
                        $("#Text1").val("-" + res);
                    }
                }
            });

        });
    </script>

为了让界面稍微好看点，还加了一点CSS

<style type="text/css">
        .button
        {
            
            background-color: #CCCCCC;
            width: 40px;
            height: 40px;
            cursor: pointer;        
        }
        .text
        {
            text-align: right;
            width:98%; 
            border-color:Orange;
            color:Red;
        }
        .table
        {
            position: absolute;
            border-width: 25px;
            border-left-style: ridge;
            border-bottom-style: ridge;
            border-top-style: ridge;
            border-right-style: ridge;
        }
    </style>

HTML代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>计算器</title>
</head>
<body>
    <table class="table">
    <tr><th colspan="5" align="left">计算器- -!</th></tr>
        <tr>
            <td colspan="5">
                <input id="Text1" type="text" value="0"  disabled="disabled" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="Button1" type="button" name="spaceback" value="<-" />
            </td>
            <td>
                <input id="Button2" type="button" value="CE" />
            </td>
            <td>
                <input id="Button3" type="button" value="C" />
            </td>
            <td>
                <input id="Button4" type="button" value="+/-" />
            </td>
            <td>
                <input id="Button5" type="button" name="genhao" value="√" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="Button6" type="button" name="btn" value="7" />
            </td>
            <td>
                <input id="Button7" type="button" name="btn" value="8" />
            </td>
            <td>
                <input id="Button8" type="button" name="btn" value="9" />
            </td>
            <td>
                <input id="Button9" type="button" name="calchar" value="/" />
            </td>
            <td>
                <input id="Button10" type="button" name="pingfang" value="x²" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="Button11" type="button" name="btn" value="4" />
            </td>
            <td>
                <input id="Button12" type="button" name="btn" value="5" />
            </td>
            <td>
                <input id="Button13" type="button" name="btn" value="6" />
            </td>
            <td>
                <input id="Button14" type="button" name="calchar" value="*" />
            </td>
            <td>
                <input id="Button15" type="button" name="daoshu" value="1/x" />
            </td>
        </tr>
        <tr>
            <td>
                <input id="Button16" type="button" name="btn" value="1" />
            </td>
            <td>
                <input id="Button17" type="button" name="btn" value="2" />
            </td>
            <td>
                <input id="Button18" type="button" name="btn" value="3" />
            </td>
            <td>
                <input id="Button19" type="button" name="calchar" value="-" />
            </td>
            <td rowspan="2">
                <input id="Button20" type="button" value="=" style="height: 80px" />
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input id="Button21" type="button" value="0" name="btn" style="width: 80px" />
            </td>
            <td>
                <input id="Button22" type="button" name="dot" value="." />
            </td>
            <td>
                <input id="Button23" type="button" name="calchar" value="+" />
            </td>
        </tr>
    </table>
</body>
</html>

好了，大概就是这样了