简易计算器
设置一个table表格,主要用css样式设计和js程序设计。colspan为合并列,rowspan是合并行。输入数字后单击运算符号。代码如下:
<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>
阅读更多
想对作者说点什么? 我来说一句

jsp计算器代码

2018年01月02日 5KB 下载

计算器简易计算器简易计算器

2007年07月17日 4KB 下载

java版简易计算器

2017年09月26日 12KB 下载

Qt简易计算器

2013年11月28日 4KB 下载

CSS简易计算器

2014年04月11日 2KB 下载

简易计算器.简易计算器.

2009年05月15日 174KB 下载

java简易计算器,计算器

2011年02月10日 2KB 下载

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

不良信息举报

简易计算器

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭