Bagaimana untuk mencipta kalkulator binari menggunakan HTML, CSS, dan JavaScript?

Kalkulator binari ialah atur cara yang melakukan pengiraan matematik pada nombor binari. Sekarang, anda ingat bahawa nombor binari ialah nombor yang terdiri daripada dua digit sahaja, iaitu 0 dan 1. Dalam blog ini, kami akan menggunakan program ini untuk mengira penambahan, penolakan, pendaraban dan pembahagian nombor binari. Ini akan menjadi kalkulator asas yang akan menggunakan konsep asas HTML, CSS dan JavaScript untuk melaksanakan operasi yang sama. Jadi, mari kita mula memahami struktur HTML.

struktur HTML

Pertama, kami akan membuat jadual, yang akan dibahagikan kepada baris jadual, menyediakan fungsi seperti menambah 1, menambah 0, mengosongkan paparan dan butang tanda tambah, tolak, darab dan bahagi, dsb.

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

Seperti yang anda lihat, kami mempunyai medan input dengan "paparan" ID yang dilumpuhkan. Medan ini akan digunakan untuk memaparkan hasil input dan pengiraan. Kami juga mempunyai satu set butang untuk nombor binari yang berbeza (0 dan 1) dan operasi matematik yang berbeza (+, -, *, /). Setiap butang mempunyai atribut onclick yang mencetuskan fungsi JavaScript apabila diklik.

Gaya CSS

Seterusnya, kami akan menambah beberapa gaya CSS untuk menjadikan kalkulator kami kelihatan lebih bagus.

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

Fungsi JavaScript

Akhir sekali, kami akan menambah fungsi JavaScript pada kalkulator.

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

Gabungkan semua kod di atas ke dalam fail 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>

Dalam tutorial ini, kami belajar cara mencipta kalkulator binari menggunakan HTML, CSS dan JavaScript. Kami telah melihat cara untuk menyediakan struktur HTML, menambah gaya CSS dan kefungsian JavaScript untuk mencipta kalkulator yang boleh digunakan. Anda boleh menambah lebih banyak ciri seperti mengendalikan keadaan ralat dan menambah lebih banyak tindakan mengikut keperluan anda. Projek ini membantu anda memahami cara bahasa yang berbeza berfungsi bersama untuk mencipta aplikasi web yang dinamik dan interaktif.

Atas ialah kandungan terperinci Bagaimana untuk mencipta kalkulator binari menggunakan HTML, CSS, dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!