使用js完成页面中的四则运算

在JavaScript中，你可以创建一个简单的小型计算器，让用户在页面上输入数字和操作符来进行四则运算。以下是基本的步骤：

首先，创建HTML结构，包含输入框、选择器（按钮）以及显示结果的区域：

<input type="text" id="num1" placeholder="输入第一个数字">
<select id="operator">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
</select>
<input type="text" id="num2" placeholder="输入第二个数字">
<button onclick="calculate()">计算</button>
<p id="result"></p>

接着编写JavaScript函数来处理计算：

function calculate() {
  // 获取输入值
  var num1 = parseFloat(document.getElementById('num1').value);
  var num2 = parseFloat(document.getElementById('num2').value);
  var operator = document.getElementById('operator').value;

  // 判断数值是否有效，防止除数为0
  if (isNaN(num1) || isNaN(num2)) {
    alert('请输入有效的数字！');
    return;
  }

  switch (operator) {
    case '+':
      document.getElementById('result').innerText = num1 + num2;
      break;
    case '-':
      document.getElementById('result').innerText = num1 - num2;
      break;
    case '*':
      document.getElementById('result').innerText = num1 * num2;
      break;
    case '/':
      if (num2 !== 0) {
        document.getElementById('result').innerText = num1 / num2;
      } else {
        alert('除数不能为0！');
      }
      break;
    default:
      alert('请选择正确的运算符！');
  }
}

这个函数会在用户点击“计算”按钮时获取输入的两个数字和选中的运算符，然后根据运算符执行相应的数学操作，并将结果显示在页面上。