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>

好了，大概就是这样了