如何写出一个简易加法计算器

来源:5-4 有参数的函数

一只特立独行的doge

2016-04-19 17:08

我的思路是四个文本框,一个计算按钮,x,y,z分别对应三个文本框,完成计算后的答案显示在第四个文本框。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易计算器</title>
<script type="text/JavaScript">


   function add3()                  
 {   var x=document.getElementById("numX").value;//得到第一个x的数字
        var y=document.getElementById("numY").value;//得到第二个y的数字
        var z=document.getElementById("numZ").value;//得到第三个z的数字
     sum = x + y +z;//完成计算,得到sum
  document.getElementById("numSum").value=sum;//将sum的值给到第四个文本框
 } 
</script>
</head>
<body>
<input type="text" value="3" id="numX"/></br>
<input type="text" value="4" id="numY"/></br>
<input type="text" value="5" id="numeZ"/></br>
<input type="text" value="answer" id="numSum"/></br>
<input type="button" value="add3" onClick="add3()"/>
</body>
</html>


写回答 关注

4回答

  • qq__1633
    2016-04-19 17:24:00
    已采纳

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>简易计算器</title>

    <script type="text/JavaScript">


       function add3()                  

     {   var x=document.getElementById("numX").value;//得到第一个x的数字

            var y=document.getElementById("numY").value;//得到第二个y的数字

            var z=document.getElementById("numZ").value;//得到第三个z的数字

         var sum =  parseInt(x)+ parseInt(y)+ parseInt(z);//完成计算,得到sum

      document.getElementById("numSum").value=sum;//将sum的值给到第四个文本框

     }  

    </script>

    </head>

    <body>

    <input type="text" value="3" id="numX"/></br>

    <input type="text" value="4" id="numY"/></br>

    <input type="text" value="5" id="numZ"/></br>

    <input type="text" value="answer" id="numSum"/></br>

    <input type="button" value="add3" onClick="add3()"/>

    </body>

    </html>


    qq__16... 回复一只特立独行...

    哈哈。细心点就好了

    2016-04-28 09:31:49

    共 3 条回复 >

  • 桃太郎
    2016-09-25 00:38:15

    再给一种思路,改动“xiao”(也你一定最小)

    <!DOCTYPE HTML>

    <html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title>简易计算器</title>

    <script type="text/JavaScript">


       function add3()                  

     {   var x=document.getElementById("numX").value;//得到第一个x的数字

            var y=document.getElementById("numY").value;//得到第二个y的数字

            var z=document.getElementById("numZ").value;//得到第三个z的数字

         sum = (x-0) + (y-0) +(z-0);//完成计算,得到sum

      document.getElementById("numSum").value=sum;//将sum的值给到第四个文本框

     }  

    </script>

    </head>

    <body>

    <input type="text" value="3" id="numX"/></br>

    <input type="text" value="4" id="numY"/></br>

    <input type="text" value="5" id="numZ"/></br>

    <input type="text" value="answer" id="numSum"/></br>

    <input type="button" value="add3" onClick="add3()"/>

    </body>

    </html>


  • 慕粉18258208390
    2016-07-07 08:31:36

    ...你们真的是刚学到这 写出来的代码吗。。。为何我看不懂。。。。

    一只特立独行...

    额。。。一步一步学到这应该看懂没问题了把。。。。

    2016-07-10 14:41:03

    共 1 条回复 >

  • shuangxiaoyu0820
    2016-04-19 18:04:52

    计算器加减乘除的简易运算~



     <script type="text/javascript">

       function count(){

        var res=0;

        //获取第一个输入框的值

        var firnum = parseInt(document.getElementById("txt1").value);   

        //获取第二个输入框的值

        var secnum = parseInt(document.getElementById("txt2").value);

    //获取选择框的值

        var sel = document.getElementById("select").value;

    //获取通过下拉框来选择的值来改变加减乘除的运算法则

        switch(sel)

            {

            case '+':

                res = firnum + secnum;

                break;

            case '-':

                res = firnum - secnum;

                break;

            case '*':

                res = firnum * secnum;

                break;

            case '/':

                res = firnum / secnum;

                break;

            }    

        //设置结果输入框的值 

        document.getElementById("fruit").value = res;

       }

      </script> 

     </head> 

     <body>

       <input type='text' id='txt1' /> 

       <select id='select'>

    <option value='+'>+</option>

    <option value="-">-</option>

    <option value="*">*</option>

    <option value="/">/</option>

       </select>

       <input type='text' id='txt2' /> 

       <input type='button' value=' = ' onClick = "count()" /> <!--通过 = 按钮来调用创建的函数,得到结果--> 

       <input type='text' id='fruit' />   

     </body>

    一只特立独行...

    谢谢了,解决了,!

    2016-04-19 18:10:39

    共 1 条回复 >

JavaScript进阶篇

本课程从如何插入JS代码开始,带您进入网页动态交互世界

468190 学习 · 21891 问题

查看课程

相似问题