计算器的实现

发表时间:2017-05-12 16:12:17 浏览量( 14 ) 留言数( 0 )

学习目标:

1、了解Java的历史

2、为什么要学习Java语言

3、端正学习态度


学习过程:

下面我们再做一个计算器的示例,一般要完成一个与用户有交互功能的网页,第一步都是先把网页的排版搞定,然后在写javascript,基本上javascript的功能就会控制HTML的标签对象,通过修改HTML标签对象或者修改器对应的css样式来达到一种动态的效果。比如这个计算器,他的页面实现代码如下:

<body>
<table width="476" height="213" border="1">
 <tr>
   <td colspan="2">第一个数</td>
   <td colspan="2">
      <input id="num1"  value=""  />
   </td>
 </tr>
 <tr>
   <td colspan="2">第二个数</td>
   <td colspan="2"><input id="num2"/></td>
 </tr>
 <tr>
   <td width="124">
   <input  type="button" value="加"  onclick="ope('+')"/>
   </td>
   <td width="84"><input  type="button" value="减" onclick="ope('-')" /></td>
   <td width="141"><input  type="button" value="乘" onclick="ope('*')"/></td>
   <td width="99"><input  type="button"value="除" onclick="ope('/')"/></td>
 </tr>
 <tr>
   <td colspan="2">结果</td>
   <td colspan="2"><input id="result"/></td>
 </tr>
</table>
</body>

一般来说凡是需要通过javascript控制的标签,我们都赋予一个id属性,这样就可以通过document对象的getElementById获得它的对象引用了。javascript的实现代码如下:

<script language="javascript" type="text/javascript">
 function ope(op){
 //1、获得用户输入的值
 var num1=document.getElementById("num1");
 var n1= num1.value;
 
 var num2=document.getElementById("num2");
 var n2= num2.value;
 
 n1=parseInt(n1);
 n2=parseInt(n2);
 
 //2、业务处理
 var result;
 switch(op){
 
 case '+':
    result=n1+n2;
break;
case '-':
    result=n1-n2;
break;
case '*':
    result=n1*n2;
break;
     case '/':
    result=n1/n2;
break;
 }
//3、显示结果
document.getElementById("result").value=result;
 }
</script>