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>
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;
}
3、首先需要获取到第一个输入框的值：a=document.getElementById("num1").value;
4、然后需要获取到第二个输入框的值：b=document.getElementById("num2").value;
5、最后是实现两个输入数值的相加：sum=parseInt(a)+parseInt(b);
6、输出相加的结果：document.getElementById("num3").value=sum;
