Comment créer une calculatrice binaire en utilisant HTML, CSS et JavaScript ?

Binary Calculator est un programme qui effectue des calculs mathématiques sur des nombres binaires. Or, vous vous souvenez qu’un nombre binaire est un nombre composé de seulement deux chiffres, à savoir 0 et 1. Dans ce blog, nous utiliserons ce programme pour calculer l'addition, la soustraction, la multiplication et la division de nombres binaires. Il s'agira d'une calculatrice de base qui utilisera les concepts de base de HTML, CSS et JavaScript pour effectuer les mêmes opérations. Commençons donc par comprendre la structure HTML.

Structure HTML

Tout d'abord, nous allons créer un tableau, qui sera divisé en lignes de tableau, fournissant des fonctions telles que l'ajout de 1, l'ajout de 0, l'effacement de l'affichage et des boutons pour les signes d'addition, de soustraction, de multiplication et de division, etc.

<form>
   <table>
      <tr>
         <td colspan="4">
            <input type="text" id="display" disabled />
         </td>
      </tr>
      <tr>
         <td>
            <input type="button" value="1" onclick="addToDisplay(1)" />
         </td>
         <td>
            <input type="button" value="0" onclick="addToDisplay(0)" />
         </td>
         <td>
            <input type="button" value="C" onclick="clearDisplay()" />
         </td>
         <td>
            <input type="button" value="+" onclick="addToDisplay('+')" />
         </td>
         <td>
            <input type="button" value="-" onclick="addToDisplay('-')" />
         </td>
         <td>
            <input type="button" value="*" onclick="addToDisplay('*')" />
         </td>
         <td>
            <input type="button" value="/" onclick="addToDisplay('/')" />
         </td>
         <td>
            <input type="button" value="=" onclick="calculate()" />
         </td>
      </tr>
      <tr>
         <td colspan="4">
            Equivalent Decimal is:
            <p id="toDecimal"></p>
         </td>
      </tr>
      <tr>
         <td colspan="4">
            <p id="previousCalculation"></p>
         </td>
      </tr>
      <!-- more buttons for the other operations -->
   </table>
</form>

Comme vous pouvez le voir, nous avons un champ de saisie avec l'ID "affichage" qui est désactivé. Ce champ sera utilisé pour afficher les résultats de saisie et de calcul. Nous disposons également d'un ensemble de boutons pour différents nombres binaires (0 et 1) et différentes opérations mathématiques (+, -, *, /). Chaque bouton possède un attribut onclick qui déclenche une fonction JavaScript lorsque vous cliquez dessus.

Styles CSS

Ensuite, nous ajouterons quelques styles CSS pour rendre notre calculatrice plus jolie.

<style>
   /* Center the calculator on the page */
   table {
      margin: 0 auto;
      padding: 20px;
   }
   /* Style the display */
   #display {
      background-color: #f2f2f2; /* gray */
      text-align: right;
      padding: 12px 20px;
      font-size: 20px;
      border: none;
      width: 100%;
   }
   /* Add some spacing between the buttons */
   input[type="button"] {
      margin: 5px;
   }
   /* Give the buttons a consistent size and appearance */
   input[type="button"] {
      width: 50px;
      height: 50px;
      font-size: 18px;
      background-color: #f2f2f2;
      border: none;
      cursor: pointer;
   }
   #toDecimal {
      font-size: 30px;
   }
   /* Add hover effect to the buttons */
   input[type="button"]:hover {
      background-color: #e6e6e6;
   }
   /* Add a different style for the operator buttons */
   input[type="button"][value="+"],
   input[type="button"][value="-"],
   input[type="button"][value="*"],
   input[type="button"][value="/"] {
      background-color: #4caf50;
      color: white;
   }
   /* Add a different style for the clear button */
   input[type="button"][value="C"] {
      background-color: #f44336;
      color: white;
   }
   /* Add a different style for the equal button */
   input[type="button"][value="="] {
      background-color: #2196f3;
      color: white;
   }
</style>

Fonctionnalité JavaScript

Enfin, nous ajouterons la fonctionnalité JavaScript à la calculatrice.

<script>
   function addToDisplay(val) {
      var display = document.getElementById("display");
      display.value += val;
   }
   function clearDisplay() {
      var display = document.getElementById("display");
      display.value = "";
      document.getElementById("toDecimal").innerHTML = "";
   }
   function calculate() {
      var display = document.getElementById("display");
      var result = eval(display.value);
      display.value = result;
      var decimalNumber = parseInt(result, 2);
      document.getElementById("toDecimal").innerHTML = decimalNumber;
   }
   function calculate() {
      var display = document.getElementById("display");
      var input = display.value;
      var result;
 
     //splitting the input by operator
      var numbers = input.split(/[+\-*/]/);
      var operator = input.replace(numbers[0], "").replace(numbers[1], "");
      
      //converting strings to binary
      var num1 = parseInt(numbers[0], 2);
      var num2 = parseInt(numbers[1], 2);
      
      //checking the operator and performing the corresponding operation
      switch (operator) {
         case "+":
         result = (num1 + num2).toString(2);
         var decimalNumber = parseInt(result, 2);
         document.getElementById("toDecimal").innerHTML = decimalNumber;
         break;
         case "-":
         result = (num1 - num2).toString(2);
         var decimalNumber = parseInt(result, 2);
         document.getElementById("toDecimal").innerHTML = decimalNumber;
         break;
         case "*":
         result = (num1 * num2).toString(2);
         var decimalNumber = parseInt(result, 2);
         document.getElementById("toDecimal").innerHTML = decimalNumber;
         break;
         case "/":
         result = (num1 / num2).toString(2);
         var decimalNumber = parseInt(result, 2);
         document.getElementById("toDecimal").innerHTML = decimalNumber;
         break;
         default:
         result = "Invalid operator";
         var decimalNumber = parseInt(result, 2);
         document.getElementById("toDecimal").innerHTML = decimalNumber;
      }
      display.value = result;
   }
</script>

Fusionnez tous les codes ci-dessus dans le fichier index.html

<!DOCTYPE html>
<html>
<head>
   <title>Calculator</title> 
      <style>
         /* Center the calculator on the page */
         table {
            margin: 0 auto;
            padding: 20px;
         }
         /* Style the display */
         #display {
            background-color: #f2f2f2; /* gray */
            text-align: right;
            padding: 12px 20px;
            font-size: 20px;
            border: none;
            width: 100%;
         }
         /* Add some spacing between the buttons */
         input[type="button"] {
            margin: 5px;
         }
         /* Give the buttons a consistent size and appearance */
         input[type="button"] {
            width: 50px;
            height: 50px;
            font-size: 18px;
            background-color: #f2f2f2;
            border: none;
            cursor: pointer;
         }
         #toDecimal {
            font-size: 30px;
         }
         /* Add hover effect to the buttons */
         input[type="button"]:hover {
            background-color: #e6e6e6;
         }
         /* Add a different style for the operator buttons */
         input[type="button"][value="+"],
         input[type="button"][value="-"],
         input[type="button"][value="*"],
         input[type="button"][value="/"] {
            background-color: #4caf50;
            color: white;
         }
         /* Add a different style for the clear button */
         input[type="button"][value="C"] {
            background-color: #f44336;
            color: white;
         }
         /* Add a different style for the equal button */
         input[type="button"][value="="] {
            background-color: #2196f3;
            color: white;
         }
   </style>
</head>
<body>
   <form>
      <table>
         <tr>
            <td colspan="4">
               <input type="text" id="display" disabled />
            </td>
         </tr>
         <tr>
            <td>
               <input type="button" value="1" onclick="addToDisplay(1)" />
            </td>
            <td>
               <input type="button" value="0" onclick="addToDisplay(0)" />
            </td>
            <td>
               <input type="button" value="C" onclick="clearDisplay()" />
            </td>
            <td>
               <input type="button" value="+" onclick="addToDisplay('+')" />
            </td>
            <td>
               <input type="button" value="-" onclick="addToDisplay('-')" />
            </td>
            <td>
               <input type="button" value="*" onclick="addToDisplay('*')" />
            </td>
            <td> 
               <input type="button" value="/" onclick="addToDisplay('/')" />
            </td>
            <td>
               <input type="button" value="=" onclick="calculate()" />
            </td>
         </tr>
         <tr>
            <td colspan="4">
               Equivalent Decimal is:
               <p id="toDecimal"></p>
            </td>
         </tr>
         <tr>
            <td colspan="4">
               <p id="previousCalculation"></p>
            </td>
         </tr>
         <!-- more buttons for the other operations -->
      </table>
   </form>
   <script>
      function addToDisplay(val) {
         var display = document.getElementById("display");
         display.value += val;
      }
      function clearDisplay() {
         var display = document.getElementById("display");
         display.value = "";
         document.getElementById("toDecimal").innerHTML = "";
      }
      function calculate() {
         var display = document.getElementById("display");
         var result = eval(display.value);
         display.value = result;
         var decimalNumber = parseInt(result, 2);
         document.getElementById("toDecimal").innerHTML = decimalNumber;
      }
      function calculate() {
         var display = document.getElementById("display");
         var input = display.value;
         var result;
         
         //splitting the input by operator
         var numbers = input.split(/[+\-*/]/);
         var operator = input.replace(numbers[0], "").replace(numbers[1], "");
         
         //converting strings to binary
         var num1 = parseInt(numbers[0], 2);
         var num2 = parseInt(numbers[1], 2);
         
         //checking the operator and performing the corresponding operation
         switch (operator) {
            case "+":
            result = (num1 + num2).toString(2);
            var decimalNumber = parseInt(result, 2);
            document.getElementById("toDecimal").innerHTML = decimalNumber;
            break;
            case "-":
            result = (num1 - num2).toString(2);
            var decimalNumber = parseInt(result, 2);
            document.getElementById("toDecimal").innerHTML = decimalNumber;
            break;
            case "*":
            result = (num1 * num2).toString(2);
            var decimalNumber = parseInt(result, 2);
            document.getElementById("toDecimal").innerHTML = decimalNumber;
            break;
            case "/":
            result = (num1 / num2).toString(2);
            var decimalNumber = parseInt(result, 2);
            document.getElementById("toDecimal").innerHTML = decimalNumber;
            break;
            default:
            result = "Invalid operator";
            var decimalNumber = parseInt(result, 2);
            document.getElementById("toDecimal").innerHTML = decimalNumber;
         }
         display.value = result;
         localStorage.setItem("previousCalculation", input + " = " + result);
         var previousCalculation = localStorage.getItem("previousCalculation");
         document.getElementById("previousCalculation").innerHTML =  previousCalculation;
      }
   </script>
</body>
</html>

Dans ce tutoriel, nous avons appris à créer une calculatrice binaire en utilisant HTML, CSS et JavaScript. Nous avons vu comment configurer la structure HTML, ajouter des styles CSS et des fonctionnalités JavaScript pour créer une calculatrice utilisable. Vous pouvez ajouter plus de fonctionnalités telles que la gestion des conditions d'erreur et ajouter plus d'actions selon vos besoins. Ce projet vous aide à comprendre comment différents langages fonctionnent ensemble pour créer des applications Web dynamiques et interactives.

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!