计算器用js原生代码怎么写

计算器用JS原生代码怎么写

使用JavaScript原生代码编写计算器可以通过以下几步实现：设计界面、添加事件监听、处理输入和输出、实现基本的计算功能。 在本文中，我们将详细解释如何一步步地用JavaScript原生代码编写一个简单的计算器应用。

一、设计界面

要实现一个计算器，首先需要设计其用户界面。我们将使用HTML和CSS来实现这个部分。界面设计的核心是确保用户可以方便地输入和查看计算结果。

1. 使用HTML构建基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <div class="display" id="display"></div>
        <div class="buttons">
            <button class="btn" data-value="7">7</button>
            <button class="btn" data-value="8">8</button>
            <button class="btn" data-value="9">9</button>
            <button class="btn" data-value="/">/</button>
            <button class="btn" data-value="4">4</button>
            <button class="btn" data-value="5">5</button>
            <button class="btn" data-value="6">6</button>
            <button class="btn" data-value="*">*</button>
            <button class="btn" data-value="1">1</button>
            <button class="btn" data-value="2">2</button>
            <button class="btn" data-value="3">3</button>
            <button class="btn" data-value="-">-</button>
            <button class="btn" data-value="0">0</button>
            <button class="btn" data-value=".">.</button>
            <button class="btn" data-value="=">=</button>
            <button class="btn" data-value="+">+</button>
            <button class="btn" data-value="C">C</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

2. 使用CSS进行样式设计

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f4f4f4;
    margin: 0;
    font-family: Arial, sans-serif;
}
.calculator {
    border: 1px solid #ccc;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    width: 300px;
    background-color: #fff;
}
.display {
    background-color: #222;
    color: #fff;
    padding: 20px;
    text-align: right;
    font-size: 2em;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
}
.buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}
.btn {
    padding: 20px;
    border: 1px solid #ccc;
    background-color: #f9f9f9;
    cursor: pointer;
    font-size: 1.5em;
    text-align: center;
    outline: none;
}
.btn:active {
    background-color: #eee;
}

二、添加事件监听

为了使计算器可以进行交互，我们需要在每个按钮上添加事件监听器，当用户点击按钮时，处理相应的输入。

document.addEventListener('DOMContentLoaded', function() {
    const display = document.getElementById('display');
    const buttons = Array.from(document.getElementsByClassName('btn'));
    buttons.map(button => {
        button.addEventListener('click', (e) => {
            const value = e.target.getAttribute('data-value');
            handleInput(value);
        });
    });
});

三、处理输入和输出

在处理用户输入时，我们需要考虑用户点击不同按钮时会发生什么。例如，数字按钮会将数字追加到显示屏上，运算符按钮会保存当前值并等待下一个输入，而等号按钮会执行计算。

let currentInput = '';
let previousInput = '';
let operator = '';
function handleInput(value) {
    if (isNaN(value)) {
        handleOperator(value);
    } else {
        handleNumber(value);
    }
    updateDisplay();
}
function handleNumber(value) {
    currentInput += value;
}
function handleOperator(value) {
    if (value === 'C') {
        currentInput = '';
        previousInput = '';
        operator = '';
    } else if (value === '=') {
        if (currentInput && previousInput && operator) {
            currentInput = evaluate(previousInput, currentInput, operator);
            previousInput = '';
            operator = '';
        }
    } else {
        if (currentInput) {
            if (previousInput && operator) {
                currentInput = evaluate(previousInput, currentInput, operator);
            }
            previousInput = currentInput;
            currentInput = '';
            operator = value;
        }
    }
}
function evaluate(num1, num2, operator) {
    const a = parseFloat(num1);
    const b = parseFloat(num2);
    switch (operator) {
        case '+':
            return (a + b).toString();
        case '-':
            return (a - b).toString();
        case '*':
            return (a * b).toString();
        case '/':
            return (a / b).toString();
        default:
            return '0';
    }
}
function updateDisplay() {
    display.innerText = currentInput || previousInput || '0';
}

四、实现基本的计算功能

在这一部分，我们已经实现了基本的计算功能，包括加、减、乘、除等操作。我们还可以进一步扩展，增加更多的功能和错误处理。

五、优化和扩展

1. 错误处理

在实际应用中，用户可能会输入一些不合法的操作，我们需要对这些操作进行错误处理。

function evaluate(num1, num2, operator) {
    const a = parseFloat(num1);
    const b = parseFloat(num2);
    if (isNaN(a) || isNaN(b)) {
        return 'Error';
    }
    switch (operator) {
        case '+':
            return (a + b).toString();
        case '-':
            return (a - b).toString();
        case '*':
            return (a * b).toString();
        case '/':
            if (b === 0) {
                return 'Error';
            }
            return (a / b).toString();
        default:
            return '0';
    }
}

2. 添加更多功能

可以添加更多的功能，比如平方根、百分比、记忆功能等。

<button class="btn" data-value="sqrt">√</button>
<button class="btn" data-value="%">%</button>

function handleOperator(value) {
    if (value === 'C') {
        currentInput = '';
        previousInput = '';
        operator = '';
    } else if (value === '=') {
        if (currentInput && previousInput && operator) {
            currentInput = evaluate(previousInput, currentInput, operator);
            previousInput = '';
            operator = '';
        }
    } else if (value === 'sqrt') {
        currentInput = Math.sqrt(parseFloat(currentInput)).toString();
    } else if (value === '%') {
        currentInput = (parseFloat(currentInput) / 100).toString();
    } else {
        if (currentInput) {
            if (previousInput && operator) {
                currentInput = evaluate(previousInput, currentInput, operator);
            }
            previousInput = currentInput;
            currentInput = '';
            operator = value;
        }
    }
}

六、总结

通过使用HTML、CSS和JavaScript原生代码，我们可以实现一个简单而功能齐全的计算器。通过不断优化和扩展功能，可以使其更加实用和强大。这不仅是一个非常好的学习项目，也是理解前端开发基础知识的一个很好的实践机会。

通过以上步骤，我们已经成功实现了一个基本的计算器，用户可以进行基本的算术运算，并且支持清除、开平方、百分比等功能。 这种通过逐步构建和优化的过程，不仅可以帮助我们更好地理解JavaScript的应用，还能提高我们的编程能力和解决问题的能力。

相关问答FAQs：

Q: 如何使用原生的JavaScript代码编写一个简单的计算器？
A: 以下是一个使用原生JavaScript代码编写的简单计算器的示例：

<!DOCTYPE html>
<html>
<head>
  <title>简单计算器</title>
  <script>
    function calculate() {
      var num1 = parseFloat(document.getElementById("num1").value);
      var num2 = parseFloat(document.getElementById("num2").value);
      var operator = document.getElementById("operator").value;
      var result;

      if (operator === "+") {
        result = num1 + num2;
      } else if (operator === "-") {
        result = num1 - num2;
      } else if (operator === "*") {
        result = num1 * num2;
      } else if (operator === "/") {
        result = num1 / num2;
      }

      document.getElementById("result").innerHTML = "结果：" + result;
    }
  </script>
</head>
<body>
  <h1>简单计算器</h1>
  <input type="number" id="num1" placeholder="请输入第一个数字">
  <select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="number" id="num2" placeholder="请输入第二个数字">
  <button onclick="calculate()">计算</button>
  <p id="result"></p>
</body>
</html>

Q: 如何在网页上添加一个使用原生JavaScript编写的计算器？
A: 您可以按照以下步骤在网页上添加使用原生JavaScript编写的计算器：

在HTML文件中，创建一个合适的容器元素，例如<div>标签。
在JavaScript文件中，编写一个计算器函数，根据用户输入的数字和操作符进行计算，并将结果显示在网页上。
在HTML文件中，使用<input>元素接收用户输入的数字，使用<select>元素提供操作符选项，使用<button>元素触发计算器函数，使用<p>元素显示计算结果。
在HTML文件中，将上述元素添加到容器元素中。
在浏览器中打开HTML文件，即可看到添加的计算器。

Q: 有没有使用原生JavaScript编写的计算器的示例代码可供参考？
A: 是的，以下是一个使用原生JavaScript代码编写的计算器的示例代码：

<!DOCTYPE html>
<html>
<head>
  <title>简单计算器</title>
  <script>
    // 计算器函数
    function calculate() {
      var num1 = parseFloat(document.getElementById("num1").value);
      var num2 = parseFloat(document.getElementById("num2").value);
      var operator = document.getElementById("operator").value;
      var result;

      if (operator === "+") {
        result = num1 + num2;
      } else if (operator === "-") {
        result = num1 - num2;
      } else if (operator === "*") {
        result = num1 * num2;
      } else if (operator === "/") {
        result = num1 / num2;
      }

      document.getElementById("result").innerHTML = "结果：" + result;
    }
  </script>
</head>
<body>
  <h1>简单计算器</h1>
  <input type="number" id="num1" placeholder="请输入第一个数字">
  <select id="operator">
    <option value="+">+</option>
    <option value="-">-</option>
    <option value="*">*</option>
    <option value="/">/</option>
  </select>
  <input type="number" id="num2" placeholder="请输入第二个数字">
  <button onclick="calculate()">计算</button>
  <p id="result"></p>
</body>
</html>

您可以复制上述代码并在浏览器中运行，以查看使用原生JavaScript编写的简单计算器的效果。

文章包含AI辅助创作，作者：Edit2，如若转载，请注明出处：https://docs.pingcode.com/baike/3668913