利用js语言编写简易的计算器!

利用js 语言编写简易的计算器,首先讲解一下思路

首先用table标签设计表格,再就是用script标签设计表格的格式

用 rowspan  colspan  向上向下合并单元格  对单元格格式进行编写

   以下是编写简易计算器:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简易计算器</title>
</head>
<script type="text/javascript">
       function jisuan(jy){
            var num1=document.getElementById('num1').value;
            var num2=document.getElementById('num2').value;
            var result="";
            switch(jy){
               case"+":
                  result=parseInt(num1)+parseInt(num2);
                  break;
               case"-":
                  result=parseInt(num1)-parseInt(num2);
                  break;
               case"*":
                  result=parseInt(num1)*parseInt(num2);
                  break;
               case"/":
                  result=parseInt(num1)/parseInt(num2);
                  break;
            }
           document.getElementById('result').value=result;
       }
</script>
<style type="text/css">
   table{
  width:500px;
  margin:10px auto;
  border:1px solid #CCF;
  border-collapse:collapse;
   }
   td,th{
  border:1px solid #CCF;
  font-size:20px;
 
   }
   tr,td{
   height:40px;
      font-size: 16px;
   }
   input[type=text]{
  height:20px;
  width:220px;
   }
   input[type=button]{
  height:30px;
  width:66px;
  background:blue;
  color:white;
  border:0;
  margin-top:10px;
     margin-left: 10px;
   }
</style>


<body>
<table>
  <tr>
    <th colspan="3">简易计算器</th>
  </tr>
  <tr>
    <td>第一个数</td>
    <td><input type="text" id='num1' /></td>
    <td rowspan="4"><input type="button" value='+' onclick="jisuan('+')" />
      <br />
      <input type="button" value='-' onclick="jisuan('-')" />
      <br />
      <input type="button" value='*' onclick="jisuan('*')" />
      <br />
      <input type="button" value='/' onclick="jisuan('/')" />
      <br /></td>
  </tr>
  <tr>
    <td>第二个数</td>
    <td><input type="text" id='num2' /></td>
  </tr>
  <tr>
    <td>结果</td>
    <td><input type="text" id='result' /></td>
  </tr>
  <tr>
    <td colspan="2">运算方法:先两个数,在选择算法</td>
</table>
</body>
</html>

阅读更多
想对作者说点什么? 我来说一句

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

关闭
关闭
关闭