简易计算器

<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>简易计算器</title>
 <script type="text/javascript">
       function mycomputer(op){
          var num1=document.getElementById('num1').value;         
          var num2=document.getElementById('num2').value;                 
          var n1=parseInt(num1); 
          var n2=parseInt(num2);
          var answer='';      
          switch(op){
           case '+':
           answer=n1+n2;
           break;
           case '-':
           answer=n1-n2;
           break;
           case '*':
           answer=n1*n2;
           break;
           case '/':
           answer=n1/n2;
           break;
            default:
          }
          document.getElementById('result').value=answer;
       }
 </script>
 <style type="text/css">
       table{
        width: 400px;
        margin: auto;
        border:2px solid #000;
        border-collapse: collapse;
       }
       th,td{
        border:1px solid #000;       
       }
       td{
        padding-left: 10px;
        height: 35px;
        font-size: 14px;
       }
       th{
        height: 40px;
        font-size: 16px;
       }
       input[type=text]{
        height: 22px;
        width: 180px;
        border:1px solid #000;
       }
       input[type=button]{
        height: 25px;
        width:30px;
        margin-top:10px;
       }
 </style>
</head>
<body>
 <table>
  <tr>
   <th colspan="4">简易计算器</th>
  </tr>
  <tr>
   <td>第一个数</td>
   <td colspan="2"><input type="text" value="" id="num1"></td>
   <td rowspan="4">
     <input type="button" value="+" onclick="mycomputer('+')" ><br>
     <input type="button" value="-" onclick="mycomputer('-')" ><br>
     <input type="button" value="*" onclick="mycomputer('*')" ><br>
     <input type="button" value="/" onclick="mycomputer('/')"><br>
   </td>
  </tr>
  <tr>
   <td>第二个数</td>
   <td colspan="2"><input type="text" value="" id="num2" onclick=""></td>
  </tr>
  <tr>
   <td>结果</td>
   <td colspan="2"><input type="text" value="" id="result" onclick=""></td>
  </tr>
  <tr>
   <td colspan="3">运算方法:先填入两个数,再选择算法</td>
  </tr>
 </table>
</body>
</html>
阅读更多

没有更多推荐了,返回首页