Day1-使用Html+css+JavaSrcipt制作简易计算器

Day1-使用Html+css+JavaSrcipt制作简易计算器

第一步：需要制作前端界面
使用表格和表单布局

<div class="main">
 <div class="math">
     <table>
         <tr>
          <td><input id="num1" type="text" class="txt"><td>
            <td><input id="type" type="text" class="txt"><td>
            <td><input id="num2" type="text" class="txt"><td>
            <td><input id="result" type="text" class="txt"><td>
         </tr>
        </table>
    </div>
    <div class="key">
     <table width="200">
          <tr>
            <td><input type="button" value="1" class="btn"></td>
            <td><input type="button" value="2" class="btn"></td>
            <td><input type="button" value="3" class="btn"></td>
            <td><input type="button" value="+" class="btn"></td>
          </tr>
          <tr>
            <td><input type="button" value="4" class="btn"></td>
            <td><input type="button" value="5" class="btn"></td>
            <td><input type="button" value="6" class="btn"></td>
            <td><input type="button" value="-" class="btn"></td>
          </tr>
          <tr>
            <td><input type="button" value="7" class="btn"></td>
            <td><input type="button" value="8" class="btn"></td>
            <td><input type="button" value="9" class="btn"></td>
            <td><input type="button" value="x" class="btn"></td>
          </tr>
          <tr>
            <td><input type="button" value="/" class="btn"></td>
            <td><input type="button" value="0" class="btn"></td>
            <td><input type="button" value="=" class="btn"></td>
            <td><input type="button" value="%" class="btn"></td>
          </tr>
        </table>
    </div>

咳咳，代码好像有点多。主要是因为布局使用表格，各个按钮之间比较好布局。
差不多，就是下面这个样子。

第二步：需要用css将前端界面美化。

<style>
.math{width:260px;height:32px;border:1px solid #000;}
.key{width:262px;height:140px; background-color:PINK;}
.txt{width:50px;}
.btn{width:50px; margin-right:10px;}
</style>

然后就变成这个样子了：

做得有点low，凑合着看吧。要做好看自己写。

第三步：需要用js实现具体功能。
首先要有编程思路，思考先实现哪一步。
从最简单的开始：将按钮上的值输入到第一个文本框中。

1. 首先需要点击按钮才会把值传入第一个文本框中，所以要给每个按钮添加点击事件；
2. 在点击事件上添加c(x)方法;传的值为x；
   例：<input type="button" value="1" class="btn" onClick="c(1)">
   例：<input type="button" value="2" class="btn" onClick="c(2)">
3. 定义c(x)方法；

function c(x){
 //获取文本框对象
 var num1 = document.getElementById("num1");
 var type = document.getElementById("type");
 var num2 = document.getElementById("num2");
 var result = document.getElementById("result");
 //判断x的值
 switch(x){
  case 11:
   type.value = "+";
   break;
  case 12:
   type.value = "-";
   break;
  case 13:
   type.value = "*";
   break;
  case 14:
   type.value = "/";
   break;
  case 15:
   type.value = "%";
   break;
   //为 = 的时
  case 20:
   //判断符号
   switch(type.value){
    case "+":
     result.value = add(parseInt(num1.value),parseInt(num2.value));
     break;
    case "-":
     result.value = subtraction(parseInt(num1.value),parseInt(num2.value));
     break;
    case "*":
     result.value = muli(parseInt(num1.value),parseInt(num2.value));
     break;
    case "/":
     if(parseInt(num2) == 0){
     alert("被除数不能为0"); 
      }else{
     result.value = division(parseInt(num1.value),parseInt(num2.value));
      }break;
    case "%":
     result.value = yu(parseInt(num1.value),parseInt(num2.value));
     break;
   }
   break;
  //优化，将0-9，改为default;
  default:
  //判断如果有符号，给num1赋值，否则给num2赋值
   if(type.value == ""){
   //因为传过来的x是String类型，而为了可以连续输入，则需要后面输入的值叠加在之前的值之后。
   //故num1.value = num1.value + x;
    num1.value += x;
    }else{
     num2.value += x;
    }
   break;
  }
 }

第四步：定义加、减、乘、除、取余 的方法

function add(a,b){
 return a+b;
 }
function subtraction(a,b){
 return a-b;
 }
function muli(a,b){
 return a*b;
 }
function division(a,b){
 return a/b;
 }
function yu(a,b){
 return a%b;
 }

第五步：完成（效果图）