Maison > Article > interface Web > JavaScript implémente quatre opérations arithmétiques simples

JavaScript implémente quatre opérations arithmétiques simples

WBOYoriginal: 2023-05-18 10:14:071560parcourir

Javascript est un langage de programmation largement utilisé dans le développement front-end, également appelé langage de script. Il peut implémenter de nombreuses fonctions, y compris quatre opérations arithmétiques simples. Cet article explique comment utiliser Javascript pour implémenter quatre opérations arithmétiques simples.

Saisie de nombres

Pour effectuer quatre opérations arithmétiques, vous devez d'abord saisir des nombres. Vous pouvez utiliser la balise input en HTML pour saisir des nombres. Par exemple :

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

Cela vous permettra de saisir deux chiffres sur la page.

Sélection des opérateurs d'opération

Les quatre opérations arithmétiques comprennent l'addition, la soustraction, la multiplication et la division. Une boîte de sélection doit être fournie sur la page pour que l'utilisateur puisse sélectionner l'opérateur qu'il souhaite effectuer. Ceci peut être réalisé en utilisant la balise select en HTML.

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

Cela vous permet de sélectionner l'un des quatre opérateurs sur la page.

Implémentation des opérations

En JavaScript, vous pouvez utiliser des fonctions mathématiques de base pour implémenter les quatre opérations arithmétiques. L'addition utilise l'opérateur +, la soustraction utilise l'opérateur -, la multiplication utilise l'opérateur * et la division utilise l'opérateur /. Par conséquent, le code peut être écrit comme suit :

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;
}

Ce code obtient d'abord les nombres et les opérateurs sur la page, puis utilise l'instruction switch pour effectuer des opérations spécifiques. Enfin les résultats sont affichés sur la page.

Exemple de code complet

<!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>

Résumé

Grâce à l'exemple de code ci-dessus, nous pouvons voir que javascript peut facilement implémenter quatre opérations arithmétiques simples. En développement réel, cette méthode de mise en œuvre peut être appliquée à la page pour permettre aux utilisateurs d'effectuer des calculs simples.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi la prise de vue VUE ne peut-elle pas être activée sur le téléphone Xiaomi Mi 8 ?Article suivant：Pourquoi la prise de vue VUE ne peut-elle pas être activée sur le téléphone Xiaomi Mi 8 ?

Articles Liés

Voir plus