📌  相关文章
📜  rekenmachine online - Html (1)

📅  最后修改于: 2023-12-03 14:47:03.570000             🧑  作者: Mango

Rekenmachine Online - HTML

Rekenmachine Online - HTML is an online calculator tool created using HTML, CSS, and JavaScript. It is designed to help programmers and students to perform basic mathematical calculations easily and quickly on a web browser.

Features
  • Addition (+), Subtraction (-), Multiplication (*), Division (/)
  • Modulus (%)
  • Parentheses for grouping calculations
  • Backspace button for correcting mistakes
  • Clear All button for resetting the calculator
  • Keyboard support for faster input
How to Use

To use Rekenmachine Online - HTML, simply follow these steps:

  1. Open your web browser and navigate to the Rekenmachine Online - HTML webpage.
  2. Begin typing in your mathematical expression, using the buttons on the calculator or your keyboard to input numbers and operators.
  3. Use parentheses to group sub-expressions and prioritize calculations.
  4. Click the "=" button or press the Enter key on your keyboard to perform the calculation. The result will be displayed in the calculator's output box.
Sample Code

The following code snippet demonstrates how to create a basic HTML calculator using the features of Rekenmachine Online - HTML:

<!DOCTYPE html>
<html>
  <head>
    <title>Calculator</title>
    <style>
      /* Basic styling for calculator */
      #calculator {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(6, 1fr);
        width: 300px;
        height: 400px;
        margin: 0 auto;
        border: 1px solid black;
        border-radius: 5px;
        overflow: hidden;
      }
      #output {
        grid-column-start: 1;
        grid-column-end: 5;
        grid-row-start: 1;
        grid-row-end: 2;
        background-color: white;
        border-bottom: 1px solid black;
        text-align: right;
        padding-right: 10px;
        font-size: 3em;
      }
      button {
        background-color: white;
        border: 1px solid black;
        font-size: 2em;
        cursor: pointer;
      }
      button:hover {
        background-color: gainsboro;
      }
      button:active {
        background-color: darkgray;
      }
    </style>
  </head>
  <body>
    <div id="calculator">
      <div id="output">0</div>
      <button onclick="addToOutput(7)">7</button>
      <button onclick="addToOutput(8)">8</button>
      <button onclick="addToOutput(9)">9</button>
      <button onclick="addToOutput('/')">/</button>
      <button onclick="addToOutput(4)">4</button>
      <button onclick="addToOutput(5)">5</button>
      <button onclick="addToOutput(6)">6</button>
      <button onclick="addToOutput('*')">*</button>
      <button onclick="addToOutput(1)">1</button>
      <button onclick="addToOutput(2)">2</button>
      <button onclick="addToOutput(3)">3</button>
      <button onclick="addToOutput('-')">-</button>
      <button onclick="addToOutput(0)">0</button>
      <button onclick="addToOutput('.')">.</button>
      <button onclick="calculate()">=</button>
      <button onclick="addToOutput('+')">+</button>
      <button onclick="resetOutput()">AC</button>
      <button onclick="removeLast()">←</button>
      <button onclick="addToOutput('(')">(</button>
      <button onclick="addToOutput(')')">)</button>
    </div>
    <script>
      let output = document.getElementById("output");
      let currentOutput = "";
      function addToOutput(value) {
        currentOutput += value;
        output.innerText = currentOutput;
      }
      function calculate() {
        try {
          currentOutput = eval(currentOutput);
          output.innerText = currentOutput;
        } catch (error) {
          output.innerText = "ERROR";
        }
      }
      function resetOutput() {
        currentOutput = "";
        output.innerText = "0";
      }
      function removeLast() {
        currentOutput = currentOutput.slice(0, -1);
        output.innerText = currentOutput;
      }
    </script>
  </body>
</html>
Conclusion

Rekenmachine Online - HTML provides a simple and easy-to-use calculator tool for programmers and students who need to perform basic mathematical calculations. With its convenient features and keyboard support, it helps developers to save time and work more efficiently. Try it out and see how it can assist you in your calculations!