js实现简单的加法运算

2025-11-08 00:29:19

1、 首先实现如下图所示的布局效果,其中h5模块的代码:

求和运算

<form >

  <div class="f">

    <div class="n1">

      <p >数字1:

        <input type="number" id="num1">

        +

    </div>

    <div class="n2">

      <input type="number" id="num2" >

    </div>

    <div class="n3">

      =

        <input type="number" id="num3" onFocus="add()">

     

    </div>

  </div>

</form>

js实现简单的加法运算

2、为了实现文字和输入框在同一行,用到了float属性,具体css模块代码如下:

* {

margin: 0;

padding: 0;

text-align: left;

}

.f {

width: 1000px;

height: 800px;

float: left;

padding: 10px;

}

.n1 {

width: 280px;

height: 20px;

float: left;

}

.n2 {

width: 280px;

height: 20px;

float: left;

}

.n3 {

width: 280px;

height: 20px;

float: left;

}

js实现简单的加法运算

3、首先需要获取到第一个输入框的值:a=document.getElementById("num1").value;

js实现简单的加法运算

4、然后需要获取到第二个输入框的值:b=document.getElementById("num2").value;

js实现简单的加法运算

5、最后是实现两个输入数值的相加:sum=parseInt(a)+parseInt(b);

js实现简单的加法运算

6、输出相加的结果:document.getElementById("num3").value=sum;

js实现简单的加法运算

声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢