javascript实现简单的四则运算-前端问答-PHP中文网

javascript实现简单的四则运算

WBOY

发布： 2023-05-18 10:14:07

原创

1604 人浏览过

javascript是一门广泛应用于前端开发的编程语言，也被称为脚本语言。它可以实现很多功能，包括简单的四则运算。本文将介绍如何使用javascript实现简单的四则运算。

数字输入

想要进行四则运算，首先需要输入数字。可以使用HTML中的input标签来实现数字的输入。例如：

<input type="number" id="num1" placeholder="请输入第一个数字">
<input type="number" id="num2" placeholder="请输入第二个数字">

登录后复制

这样就可以在页面上输入两个数字。

运算操作符的选择

四则运算有加、减、乘、除四种操作符，需要在页面上提供一个选择框，供用户选择想要进行的操作符。可以使用HTML中的select标签来实现。

<select id="operator">
  <option value="+">加</option>
  <option value="-">减</option>
  <option value="*">乘</option>
  <option value="/">除</option>
</select>

登录后复制

这样就可以在页面上选择四种操作符之一。

运算的实现

在javascript中，可以使用基本的数学函数来实现四则运算。加法使用+操作符、减法使用-操作符、乘法使用*操作符、除法使用/操作符。因此，可以按照如下方式编写代码：

function calculate() {
  var num1 = document.getElementById('num1').value;
  var num2 = document.getElementById('num2').value;
  var operator = document.getElementById('operator').value;
  var result;

  switch (operator) {
    case '+':
      result = parseFloat(num1) + parseFloat(num2);
      break;
    case '-':
      result = parseFloat(num1) - parseFloat(num2);
      break;
    case '*':
      result = parseFloat(num1) * parseFloat(num2);
      break;
    case '/':
      result = parseFloat(num1) / parseFloat(num2);
      break;
    default:
      result = '请选择操作符';
  }

  document.getElementById('result').value = result;
}

登录后复制

这段代码首先获取页面上的数字和操作符，然后使用switch语句来执行具体的运算操作。最后将结果显示在页面上。

示例完整代码

<!DOCTYPE html>
<html>

<head>
  <title>Javascript四则运算示例</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
  <h1>Javascript四则运算示例</h1>
  <p>输入两个数字，选择一个操作符，点击计算按钮进行运算</p>
  <input type="number" id="num1" placeholder="请输入第一个数字">
  <input type="number" id="num2" placeholder="请输入第二个数字">
  <select id="operator">
    <option value="+">加</option>
    <option value="-">减</option>
    <option value="*">乘</option>
    <option value="/">除</option>
  </select>
  <button onclick="calculate()">计算</button>
  <input type="text" id="result" readonly>

  <script>
    function calculate() {
      var num1 = document.getElementById('num1').value;
      var num2 = document.getElementById('num2').value;
      var operator = document.getElementById('operator').value;
      var result;

      switch (operator) {
        case '+':
          result = parseFloat(num1) + parseFloat(num2);
          break;
        case '-':
          result = parseFloat(num1) - parseFloat(num2);
          break;
        case '*':
          result = parseFloat(num1) * parseFloat(num2);
          break;
        case '/':
          result = parseFloat(num1) / parseFloat(num2);
          break;
        default:
          result = '请选择操作符';
      }

      document.getElementById('result').value = result;
    }
  </script>

</body>

</html>

登录后复制