简易计算器的制作

首先是显示页面的制作主要是css和HTML知识

 

css：

 *{padding: 0;
            margin: 0;}
       table{
           position: absolute;
           top:50%;
           left:50%;
           margin-top:-200px;
           margin-left:-200px;
           width:400px;
           height: 400px;
           border: 2px solid red;
           text-align: center;
           table-layout: fixed;
           border-spacing: 0;
       }
    
       tr>td{
           border: 1px solid black;
       }
       input{
           height:100%;
           width:100%;
           font-size: 20px;
       }

html：

<form name="first">
    <table>
        <tr><td colspan="6"><input type="text" name="result" value="0"></td></tr>
        <tr>
            <td><input type="button" value="sin" onclick="usefunc('sin')"></td>
            <td><input type="button" value="cos" onclick="usefunc('cos')"></td>
            <td><input type="button" value="1" onclick="addnum('1')"></td>
            <td><input type="button" value="2" onclick="addnum('2')"></td>
            <td><input type="button" value="3" onclick="addnum('3')"></td>
            <td><input type="button" value="+" onclick="addsign('+')"></td>
        </tr>
        <tr>
            <td><input type="button" value="asin" onclick="usefunc('asin')"></td>
            <td><input type="button" value="acos" onclick="usefunc('acos')"></td>
            <td><input type="button" value="4" onclick="addnum('4')"></td>
            <td><input type="button" value="5" onclick="addnum('5')"></td>
            <td><input type="button" value="6" onclick="addnum('6')"></td>
            <td><input type="button" value="-" onclick="addsign('-')"></td>
        </tr>
        <tr>
            <td><input type="button" value="tan" onclick="usefunc('tan')"></td>
            <td><input type="button" value="atan" onclick="usefunc('atan')"></td>
            <td><input type="button" value="7" onclick="addnum('7')"></td>
            <td><input type="button" value="8" onclick="addnum('8')"></td>
            <td><input type="button" value="9" onclick="addnum('9')"></td>
            <td><input type="button" value="*" onclick="addsign('*')"></td>
        </tr>
        <tr>
            <td><input type="button" value="log" onclick="usefunc('log')"></td>
            <td><input type="button" value="exp" onclick="usefunc('exp')"></td>
            <td><input type="button" value="0" onclick="addnum('0')"></td>
            <td><input type="button" value="." onclick="addpoint()"></td>
            <td><input type="button" value="=" onclick="count()"></td>
            <td><input type="button" value="/" onclick="addsign('/')"></td>
        </tr>
        <tr>
            <td><input type="button" value="sqrt" onclick="usefunc('sqrt')"></td>
            <td><input type="button" value="1/x" onclick="usefunc('1/x')"></td>
            <td><input type="button" value="pi" onclick="usefunc('pi')"></td>
            <td><input type="button" value="E" onclick="usefunc('E')"></td>
            <td colspan="2"><input type="button" value="清除" onclick="cleantext()"></td>
        </tr>
    </table>
    </form>

我这里用的有些繁杂，也可以只利用表格不用表单元素，例如给table添加一点击事件，利用event.srcElement.innerText赋给结果，

 

用js来进行交互，下面是js：

<script type="text/javascript">
         var pro=true;
         var cur=true;
         //addnum()输入数字 其中cur设为true是使数字能够连续进行计算像1+2+3
        function addnum(i) {
            if(first.result.value=="0")
            {
                first.result.value=i;
            }
            else{
                first.result.value+=i;
            }
            cur=true;
        }
        //addpoint（）中Pro设为false的原因是防止连续出现两个点例如..
        function addpoint(){
            if(pro){
                first.result.value+=".";
             pro=false;
            }
        }
        //添加+-*/符号 Pro设置为true的原因是能够再次输入数字从而进行计算
        function addsign(i){
            if(cur){
                first.result.value+=i;
                pro=true;
                cur=false;
            }
        }
        //结果语句
        function count(){
            first.result.value=eval(first.result.value);
            cur=true;
        }
        //清零语句
        function cleantext(){
            first.result.value="0";
            }
        //利用switch语句来进行选择函数，然后利用Math函数计算答案
        function usefunc(func){
         switch(func){
             case "sin":
             first.result.value=Math.sin(first.result.value);
             cur=ture;
             break;
             case "cos":
             first.result.value=Math.cos(first.result.value);
             cur=ture;
             break;
             case "asin":
             first.result.value=Math.asin(first.result.value);
             cur=ture;
             break;
             case "acos":
             first.result.value=Math.acos(first.result.value);
             cur=ture;
             break;
             case "tan":
             first.result.value=Math.tan(first.result.value);
             cur=ture;
             break;
             case "atan":
             first.result.value=Math.atan(first.result.value);
             cur=ture;
             break;
             case "log":
             first.result.value=Math.log(first.result.value);
             cur=ture;
             break;
             case "exp":
             first.result.value=Math.exp(first.result.value);
             cur=ture;
             break;
             case "sqrt":
             first.result.value=Math.sqrt(first.result.value);
             cur=ture;
             break;
             case "1/x":
             first.result.value=1/first.result.value;
             cur=ture;
             break;
             case "pi":
             first.result.value=Math.PI;
             cur=ture;
             break;
             case "E":
             first.result.value=Math.E;
             cur=ture;
             break;
         }
        }
        </script>

这些只是实现了计算器的部分功能，自此完结。请大佬们多多指点。多多评论^_^