Js简易计算器

最新推荐文章于 2023-11-14 10:53:55 发布

寒哥

最新推荐文章于 2023-11-14 10:53:55 发布

阅读量384

点赞数

文章标签： button input class function server table

本文链接：https://blog.csdn.net/asd135821jkl/article/details/7322332

版权

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .style1
        {
            width: 23%;
            height: 272px;
        }
        #Text1
        {
            width: 291px;
            height: 27px;
        }
        #Button1
        {
            width: 64px;
            height: 36px;
        }
        #Button2
        {
            height: 38px;
            width: 70px;
        }
        #Button3
        {
            height: 36px;
            width: 68px;
        }
        #Button4
        {
            height: 38px;
            width: 64px;
        }
        #Button5
        {
            height: 38px;
            width: 62px;
        }
        #Button6
        {
            height: 38px;
            width: 70px;
        }
        #Button7
        {
            height: 39px;
            width: 68px;
        }
        #Button8
        {
            height: 37px;
            width: 64px;
        }
        #Button12
        {
            height: 40px;
            width: 62px;
        }
        #Button11
        {
            height: 38px;
            width: 70px;
        }
        #Button10
        {
            height: 38px;
            width: 69px;
        }
        #Button9
        {
            height: 35px;
            width: 63px;
        }
        #Button13
        {
            height: 37px;
            width: 61px;
        }
        #Button14
        {
            height: 38px;
            width: 71px;
        }
        #Button15
        {
            height: 36px;
            width: 70px;
        }
        #Button16
        {
            height: 36px;
            width: 63px;
        }
        #Button20
        {
            height: 37px;
            width: 62px;
        }
        #Button19
        {
            height: 36px;
            width: 67px;
        }
        #Button18
        {
            height: 37px;
            width: 63px;
        }
        #Button17
        {
            height: 34px;
            width: 61px;
        }
        .style2
        {
            width: 59px;
        }
        .style3
        {
            width: 69px;
        }
        .style4
        {
            width: 68px;
        }
        .style5
        {
            width: 59px;
            height: 48px;
        }
        .style6
        {
            width: 69px;
            height: 48px;
        }
        .style7
        {
            width: 68px;
            height: 48px;
        }
        .style8
        {
            height: 48px;
            width: 28px;
        }
        .style9
        {
            width: 28px;
        }
    </style>
    <script type="text/javascript">
        var isNew = false;
        var opNum1;
        var opNum2;
        var opFfu;
        var results;
        function showvalues(str) {
            if (document.getElementById("Text1").value == 0) {
                document.getElementById("Text1").value = str; //在文本框中显示数据
            }
            else {
                if (isNew == false) {
                    document.getElementById("Text1").value += str;
                }
                else {
                    document.getElementById("Text1").value = str;
                    isNew = false;
                }
            }
        }

        function opFu(op) {
            opNum1 = document.getElementById("Text1").value;
            opFfu = op;
            isNew = true;

}

        function result() { //显示结果
            opNum2 = document.getElementById("Text1").value;
            results = eval(opNum1 + opFfu + opNum2);
            document.getElementById("Text1").value = results;
        }

        function sSqrt() { //开根号
            opNum1 = document.getElementById("Text1").value;
            results = Math.sqrt(opNum1);
            document.getElementById("Text1").value = results;

}

        function sSqr() { //求平方
            opNum1 = document.getElementById("Text1").value;
            results = opNum1 * opNum1;
            document.getElementById("Text1").value = results;
        }

        function clearEach() { //逐个清除
            var a = document.getElementById("Text1").value.split("");
            document.getElementById("Text1").value = "";
            for (var i = 0; i < a.length - 1; i++) {
                document.getElementById("Text1").value += a[i];
            }
        }

        function clearAll() { //一次性全部清除
            document.getElementById("Text1").value = "";
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div>

        <table bgcolor="Blue" class="style1" align="center">
            <tr>
                <td colspan="4">
                    <input id="Text1" type="text" value="0"/></td>
            </tr>
            <tr>
                <td class="style2">
                    <input id="Button1" type="button" value="+" οnclick="opFu('+')"/></td>
                <td class="style3">
                    <input id="Button2" type="button" value="1" οnclick="showvalues(1)"/></td>
                <td class="style4">
                    <input id="Button3" type="button" value="2" οnclick="showvalues(2)"/></td>
                <td class="style9">
                    <input id="Button4" type="button" value="3" οnclick="showvalues(3)"/></td>
            </tr>
            <tr>
                <td class="style2">
                    <input id="Button5" type="button" value="-" οnclick="opFu('-')"/></td>
                <td class="style3">
                    <input id="Button6" type="button" value="4" οnclick="showvalues(4)"/></td>
                <td class="style4">
                    <input id="Button7" type="button" value="5" οnclick="showvalues(5)"/></td>
                <td class="style9">
                    <input id="Button8" type="button" value="6" οnclick="showvalues(6)"/></td>
            </tr>
            <tr>
                <td class="style2">
                    <input id="Button9" type="button" value="*" οnclick="opFu('*')"/></td>
                <td class="style3">
                    <input id="Button10" type="button" value="7" οnclick="showvalues(7)"/></td>
                <td class="style4">
                    <input id="Button11" type="button" value="8" οnclick="showvalues(8)"/></td>
                <td class="style9">
                    <input id="Button12" type="button" value="9" οnclick="showvalues(9)"/></td>
            </tr>
            <tr>
                <td class="style2">
                    <input id="Button13" type="button" value="/" οnclick="opFu('/')"/></td>
                <td class="style3">
                    <input id="Button14" type="button" value="0" οnclick="showvalues(0)"/></td>
                <td class="style4">
                    <input id="Button15" type="button" value="." οnclick="showvalues('.')"/></td>
                <td class="style9">
                    <input id="Button16" type="button" value="=" οnclick="result()"/></td>
            </tr>
            <tr>
                <td class="style5">
                    <input id="Button17" type="button" value="平方根" οnclick="sSqrt()"/></td>
                <td class="style6">
                    <input id="Button18" type="button" value="平方" οnclick="sSqr()"/></td>
                <td class="style7">
                    <input id="Button19" type="button" value="C" οnclick="clearAll()"/></td>
                <td class="style8">
                    <input id="Button20" type="button" value="←" οnclick="clearEach()"/></td>
            </tr>
        </table>

    </div>
    </form>
</body>
</html>