• 计算器


    html:

    <!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <link href="css/demo7.css" rel="stylesheet" />
    <script src="js/jquery-1.10.2.min.js"></script>
    <script src="js/demo7.js"></script>
    </head>
    <body>
    <table>
    <tr>
    <td colspan="4">
    <input id="txtResult" type="text" readonly="readonly" />
    </td>
    </tr>
    <tr>
    <td>
    <input id="btn1" type="button" value="1" class="num" />
    </td>
    <td>
    <input id="btn2" type="button" value="2" class="num" />
    </td>
    <td>
    <input id="btn3" type="button" value="3" class="num" />
    </td>
    <td>
    <input id="btnAdd" type="button" value="+" class="Oper" />
    </td>
    </tr>
    <tr>
    <td>
    <input id="btn4" type="button" value="4" class="num" />
    </td>
    <td>
    <input id="btn5" type="button" value="5" class="num" />
    </td>
    <td>
    <input id="btn6" type="button" value="6" class="num" />
    </td>
    <td>
    <input id="btnMinus" type="button" value="-" class="Oper" />
    </td>
    </tr>
    <tr>
    <td>
    <input id="btn7" type="button" value="7" class="num" />
    </td>
    <td>
    <input id="btn8" type="button" value="8" class="num" />
    </td>
    <td>
    <input id="btn9" type="button" value="9" class="num" />
    </td>
    <td>
    <input id="btnMultiply" type="button" value="*" class="Oper" />
    </td>
    </tr>
    <tr>
    <td>
    <input id="btn0" type="button" value="0" class="num" />
    </td>
    <td>
    <input id="btnClear" type="button" value="C" />
    </td>
    <td>
    <input id="btnEqual" type="button" value="=" />
    </td>
    <td>
    <input id="btnDivision" type="button" value="/" class="Oper" />
    </td>
    </tr>
    </table>
    </body>
    </html>

    css:

    body {
    }

    table
    {
    padding:5px;
    border:solid 1px #cccccc;
    border-collapse:collapse;
    }
    table td
    {
    border:solid 1px #cccccc;
    40px;
    text-align:center;
    height:30px;
    }

    js:


    var sRecordLink = "";
    var sRecordNum1 = ""
    var sRecordNum2 = ""
    var sRecordOper = "";
    var sResult = "";
    $(function () {
    //清除
    $("#btnClear").click(function () {
    $("#txtResult").val("");
    sRecordNum = "";
    sRecordNum1 = "";
    sRecordNum2 = "";
    sRecordOper = "";
    sResult = "";
    });

    $(".num").click(function () {
    sRecordLink = $("#txtResult").val();
    $("#txtResult").val(sRecordLink + $(this).val());
    if (sRecordOper == "") {
    sRecordNum1 = $("#txtResult").val();
    }
    else {
    sRecordNum2 = $("#txtResult").val();
    }
    });

    $(".Oper").click(function () {
    sRecordLink = "";
    sRecordOper = $(this).val();
    $("#txtResult").val("");
    });

    $("#btnEqual").click(function () {
    OperNum();
    });
    });

    function OperNum() {
    switch (sRecordOper) {
    case "+":
    {
    sResult = (parseInt(sRecordNum1) + parseInt(sRecordNum2)).toString();
    break;
    }
    case "-":
    {
    sResult = (parseInt(sRecordNum1) - parseInt(sRecordNum2)).toString();
    break;
    }
    case "*":
    {
    sResult = (parseInt(sRecordNum1) * parseInt(sRecordNum2)).toString();
    break;
    }
    case "/":
    {
    sResult = (parseInt(sRecordNum1) / parseInt(sRecordNum2)).toString();
    break;
    }
    default:
    {
    break;
    }
    }
    $("#txtResult").val(sResult);
    sRecordNum1 = sResult;
    sRecordNum2 = "";
    sRecordOper = "";
    sRecordLink = "";
    }

  • 相关阅读:
    js中break/continue
    js实现连接的两种放法
    jsdate对象toLocaleString()方法小结
    接口学习小节
    c# 装箱和拆箱
    c#数据类型学习
    return 作用域
    js中break/continue
    ArcGIS Runtime for Android开发教程V2.0(9)基础篇查询检索
    【转】ArcGIS 10.1 地图发布以及缓存管理
  • 原文地址:https://www.cnblogs.com/sunshinezjb/p/8550611.html
Copyright © 2020-2023  润新知