如何使用JavaScript编写一个简单的计算器|极客教程

如何使用JavaScript编写一个简单的计算器

在这个现代化的世界，计算机软件已经无处不在，而计算器作为其中一个最基本的功能，也是我们日常生活中经常会用到的工具之一。本文将详细介绍如何使用JavaScript编写一个简单的计算器，并通过一些示例代码来演示。

计算器的基本功能

一个简单的计算器通常需要实现加法、减法、乘法和除法这四种基本的运算功能。除此之外，还需要实现一个清除按钮用于清空输入以及一个等号按钮用于计算结果。在这个教程中，我们将会实现这些基本功能。

HTML部分

首先，我们需要创建一个基本的HTML结构来放置我们的计算器。以下是一个简单的HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Simple Calculator</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="calculator">
        <input type="text" class="display" id="display" readonly>
        <button class="btn" onclick="clearDisplay()">C</button>
        <button class="btn" onclick="addToDisplay('/')">/</button>
        <button class="btn" onclick="addToDisplay('*')">*</button>
        <button class="btn" onclick="addToDisplay('7')">7</button>
        <button class="btn" onclick="addToDisplay('8')">8</button>
        <button class="btn" onclick="addToDisplay('9')">9</button>
        <button class="btn" onclick="addToDisplay('-')">-</button>
        <button class="btn" onclick="addToDisplay('4')">4</button>
        <button class="btn" onclick="addToDisplay('5')">5</button>
        <button class="btn" onclick="addToDisplay('6')">6</button>
        <button class="btn" onclick="addToDisplay('+')">+</button>
        <button class="btn" onclick="addToDisplay('1')">1</button>
        <button class="btn" onclick="addToDisplay('2')">2</button>
        <button class="btn" onclick="addToDisplay('3')">3</button>
        <button class="btn" onclick="calculate()">=</button>
    </div>
    <script src="calculator.js"></script>
</body>
</html>

在这段HTML代码中，我们创建了一个包含输入框和按钮的计算器界面，并引入了一个名为calculator.js的JavaScript文件用于编写计算器的逻辑部分。

CSS部分

为了让我们的计算器有一个漂亮的外观，我们需要一些CSS样式来美化界面。以下是一个简单的styles.css文件：

.calculator {
    width: 300px;
    margin: 50px auto;
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

.display {
    width: 100%;
    height: 40px;
    margin-bottom: 10px;
    font-size: 20px;
}

.btn {
    width: 50px;
    height: 50px;
    margin: 5px;
    font-size: 20px;
}

JavaScript部分

最重要的部分就是JavaScript代码的编写了。我们需要实现将按钮的点击事件与相应的功能进行绑定，包括清除按钮的功能、添加数字和运算符到输入框以及计算结果的功能。以下是一个简单的calculator.js文件：

let display = document.getElementById('display');
let result = 0;
let operator = '';
let currentInput = '';

function clearDisplay() {
    display.value = '';
    result = 0;
    operator = '';
    currentInput = '';
}

function addToDisplay(value) {
    display.value += value;
    currentInput += value;
}

function calculate() {
    switch (operator) {
        case '+':
            result += parseFloat(currentInput);
            break;
        case '-':
            result -= parseFloat(currentInput);
            break;
        case '*':
            result *= parseFloat(currentInput);
            break;
        case '/':
            result /= parseFloat(currentInput);
            break;
        default:
            result = parseFloat(currentInput);
            break;
    }
    display.value = result;
    currentInput = '';
}

在这段JavaScript代码中，我们创建了一些全局变量用于存储计算器的状态，实现了清除、添加和计算功能。