题目:

实现如图所示的一个简易计算器,可以进行两个数字的加减乘除运算。
89.png
思路:

获取数字1和数字2的值,根据选择的不同的运算法,走不同的运算分支,算出结果。

实现步骤:

01基础HTML代码
HTML代码如下:

<div id="app">
  <span>数字1:</span>
  <input type="text" id="num1" style="font-size: 18px" />
  <br /><br />
  <span>数字2:</span>
  <input type="text" id="num2" style="font-size: 18px" />
  <br /><br />
  <span>结 果:</span>
  <input type="text" id="result" style="font-size: 18px" />
  <br /><br />
  <button onclick="calculator('+')">+</button>
  <button onclick="calculator('-')">-</button>
  <button onclick="calculator('*')">*</button>
  <button onclick="calculator('÷')">÷</button>
</div>

02JavaScript代码
JavaScript通过 if ... else if ... else 分支语句来计算不同的运算,代码如下。

//函数的定义
function calculator(sign) {
  // 获取数字值
  var n1 = document.getElementById("num1").value;
  var n2 = document.getElementById("num2").value;
  // 初始化结果
  var result;
  // 根据不同的运算符做不同的运算
  // 如果是加号,做加法运算
  if (sign == "+") {
    result = parseInt(n1) + parseInt(n2);
  }
  /// 如果是减号,做减法运算
  else if (sign == "-") {
    result = parseInt(n1) - parseInt(n2);
  }
  // 如果是乘号,做乘法运算
  else if (sign == "*") {
    result = parseInt(n1) * parseInt(n2);
  }
  // 如果是除号,做除法运算
  else if (sign == "÷") {
    result = parseInt(n1) / parseInt(n2);
  }
  // 如果都不是,则报错后,返回
  else {
    alert('输入错误');
    return;
  }
  // 写入结果
  document.getElementById("result").value =
    n1 + "" + sign + "" + n2 + "=" + result;
}