JavaScript 创建一个简单的计算器

小菜鸟最近在学习JavaScript，练习一些小栗子加深印象，计算器的栗子很经典，使用 HTML 、JavaScript 创建一个简单的计算器，包含加、减、乘、除四个功能，以下是代码练习：

HTML部分：

<p>简易计算器:</p>
<table border="2" style="position:center;">
  <tr>
    <td>NUM1：</td>
    <td><input type="text" id="first"/></td>
  </tr>
  <tr>
    <td>NUM2：</td>
    <td><input type="text" id="second"/></td>
  </tr>
  <tr>
    <td colspan="2" >
       
      <button οnclick="add()">+</button>
       
      <button οnclick="subtract()">-</button>
       
      <button οnclick="ride()">*</button>
       
      <button οnclick="devide()">/</button>
    </td>
  </tr>
  <tr>
    <td colspan="2" rowspan="2">
      <p id="result"></p>
    </td>
  </tr>
</table>

JavaScript部分：

var r;
//加法
function add() {
  var a = getFirstNumber();
  var b = getSecondNumber();
  var re =Number( a) +Number( b);//用Number()将ab转化为数字,否则默认为字符串拼接
  sendResult(a,b,re,"+");
}


//减法
function subtract() {
  var a = getFirstNumber();
  var b = getSecondNumber();
  var re = a - b;
  sendResult(a,b,re,"-");
}


//乘法
function ride() {
  var a = getFirstNumber();
  var b = getSecondNumber();
  var re = a * b;
  sendResult(a,b,re,"*");
}


//除法
function devide() {
  var a = getFirstNumber();
  var b = getSecondNumber();
  var re = a / b;
  sendResult(a,b,re,"/");
}


//给p标签传值
function sendResult(x,y,r,s) {
  var num = document.getElementById("result")
  num.innerHTML = x+s+y+"="+r;
}


//获取第一位数字
function getFirstNumber() {
  var firstNumber = document.getElementById("first").value;
  return firstNumber;
}


//获取第二位数字
function getSecondNumber() {
  var secondNumber = document.getElementById("second").value;
  return secondNumber;
}

输出：