qq_25384937 2015-12-27 13:53 采纳率: 50%
浏览 5231
已采纳

用javascript做一个计算器怎样才能让数字按键上的数字显示在上面的文本框中

用javascript做一个计算器怎样才能让数字按键上的数字显示在上面的文本框中

  • 写回答

2条回答 默认 最新

  • threenewbee 2015-12-27 14:34
    关注

    参考这个完整的例子

     <html>
    <head>
    <title>JS版计算器</title>
    <link rel="stylesheet" type="text/css" href="">
    <meta http-equiv="content-type" content="text/html;charset=utf-8">
    <!--js代码可以放置在任意位置,按照先后顺序依次执行 一般放在head标签之间-->
    <script type="text/javascript">
        /* 定义一个Calculator类*/
        function Calculator(){
    
            this.jisuan=function(num1,num2,oper){
                var res=0;
                switch(oper){
                    case "+":
                        res=num1+num2;
                        break;
                    case "-":
                        res=num1-num2;
                        break;
                    case "*":
                        res=num1*num2;
                        break;
                    case "/":
                        res=num1/num2;
                        break;
                }
                return res;
            }
        }
        //创建对象
        var calculator=new Calculator();
        /*定义全局变量*/
        var val=0; //放置输入的值
        var xval=0;//保存转换Number类型的值
        var temp=0; //保存第一次输入的值    
        var oper="";//保存输入的操作符
        /*获取输入数字*/
        function inputEvent(e){
    
            val=e.value
            var xsval=document.getElementById("inp1");        
            xsval.value+=val; //连续输入数字(String类型)
            //转换Number类型
            xval=parseFloat(xsval.value);
    
        }
        /*获取第一行的数据*/
        function inputPCB(e){
            //window.alert(e.value);
            var xsval=document.getElementById("inp1");
            if(e.value=="Clear"){
                xsval.value="";
            }else if(e.value=="Back"){
                /*这个功能还没有实现,有兴趣的朋友可以自己做一做*/
            }else if(e.value=="POWER"){
                //计算平方
                xsval.value=Math.pow(xsval.value,2);            
            }
        }
        /*输入操作符*/
        function inputOper(e){
            oper=e.value;
            //window.alert(typeof oper);
            //oper=oper.substr(0);
            if (e.value=="+"){
                var xsval=document.getElementById("inp1");
                //保存上次计算结果,并对字符串进行转换Number类型
                temp=parseFloat(xsval.value);
                //第一次输入的值设置为空
                xsval.value="";                        
            }else if(e.value=="-"){
                var xsval=document.getElementById("inp1");
                temp=parseFloat(xsval.value);
                xsval.value="";
            }else if(e.value=="*"){
                var xsval=document.getElementById("inp1");
                temp=parseFloat(xsval.value);
                xsval.value="";
            }else if(e.value=="/"){
                var xsval=document.getElementById("inp1");
                temp=parseFloat(xsval.value);
                xsval.value="";
            }
        }
        /*计算结果*/
        function inputEquel(e){
            var xsval=document.getElementById("inp1");        
            if(e.value=="="){
                //window.alert(xval);
                //调用对象方法
                xsval.value=calculator.jisuan(temp,xval,oper);
            }
        }
    </script>
    <!--css 样式-->
    <style>
        input{
            width:60px;
        }
        #inp1{
            width:280px;
            text-align:right;
        }
    </style>
    </head>
    <body>
        <table border="1">
            <!--显示结果行-->
            <tr><td colspan="4"><input id="inp1" type="text" value="" name="xianshi"/></td></tr>
    
            <!--第一行-->
            <tr><td><input type="button" value="POWER" onclick="inputPCB(this)"/></td><td><input type="button" value="Clear" onclick="inputPCB(this)"/></td><td><input type="button" value="Back"onclick="inputPCB(this)"/></td><td></td></tr>
            <!--第二行-->
            <tr><td><input type="button" value="1" onclick="inputEvent(this)"/></td><td><input type="button" value="2" onclick="inputEvent(this)"/></td><td><input type="button"value="3" onclick="inputEvent(this)"/></td><td><input type="button" value="4" onclick="inputEvent(this)"/></td></tr>
            <!--第三行-->
            <tr><td><input type="button" value="5" onclick="inputEvent(this)"/></td><td><input type="button" value="6" onclick="inputEvent(this)"/></td><td><input type="button"value="7" onclick="inputEvent(this)"/></td><td><input type="button" value="8" onclick="inputEvent(this)"/></td></tr>    
            <!--第四行-->
            <tr><td><input type="button" value="9" onclick="inputEvent(this)"/></td><td><input type="button" value="0" onclick="inputEvent(this)"/></td><td><input type="button"value="." onclick="inputEvent(this)"/></td><td><input type="button" value="=" onclick="inputEquel(this)"/></td></tr>
            <!--第五行-->
            <tr><td><input type="button" value="+" onclick="inputOper(this)"/></td><td><input type="button" value="-" onclick="inputOper(this)"/></td><td><input type="button"value="*" onclick="inputOper(this)"/></td><td><input type="button" value="/" onclick="inputOper(this)"/></td></tr>    
    
        </table>
    </body>
    </html>
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

悬赏问题

  • ¥15 seatunnel-web使用SQL组件时候后台报错,无法找到表格
  • ¥15 fpga自动售货机数码管(相关搜索:数字时钟)
  • ¥15 用前端向数据库插入数据,通过debug发现数据能走到后端,但是放行之后就会提示错误
  • ¥30 3天&7天&&15天&销量如何统计同一行
  • ¥30 帮我写一段可以读取LD2450数据并计算距离的Arduino代码
  • ¥15 C#调用python代码(python带有库)
  • ¥15 飞机曲面部件如机翼,壁板等具体的孔位模型
  • ¥15 vs2019中数据导出问题
  • ¥20 云服务Linux系统TCP-MSS值修改?
  • ¥20 关于#单片机#的问题:项目:使用模拟iic与ov2640通讯环境:F407问题:读取的ID号总是0xff,自己调了调发现在读从机数据时,SDA线上并未有信号变化(语言-c语言)