Home >Web Front-end >JS Tutorial >Build an online calculator using JavaScript

Build an online calculator using JavaScript

WBOYOriginal: 2023-08-09 15:46:491548browse

With the development of the Internet, more and more tools and applications have begun to appear online. Among them, calculator is one of the most widely used tools. This article explains how to build a simple online calculator using JavaScript and provides code examples.

Before we start, we need to understand some basic HTML and CSS knowledge. The calculator interface can be built using HTML table elements and then styled using CSS. The following is an HTML code example for a basic calculator interface:

<!DOCTYPE html>
<html>
<head>
    <title>在线计算器</title>
    <link rel="stylesheet" type="text/css" href="calculator.css">
</head>
<body>
    <div class="calculator">
        <table>
            <tr>
                <td colspan="4"><input type="text" id="result" disabled></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(7)">7</button></td>
                <td><button onclick="appendNumber(8)">8</button></td>
                <td><button onclick="appendNumber(9)">9</button></td>
                <td><button onclick="appendOperator('+')">+</button></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(4)">4</button></td>
                <td><button onclick="appendNumber(5)">5</button></td>
                <td><button onclick="appendNumber(6)">6</button></td>
                <td><button onclick="appendOperator('-')">-</button></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(1)">1</button></td>
                <td><button onclick="appendNumber(2)">2</button></td>
                <td><button onclick="appendNumber(3)">3</button></td>
                <td><button onclick="appendOperator('*')">*</button></td>
            </tr>
            <tr>
                <td><button onclick="appendNumber(0)">0</button></td>
                <td><button onclick="appendOperator('.')">.</button></td>
                <td><button onclick="calculate()">=</button></td>
                <td><button onclick="appendOperator('/')">/</button></td>
            </tr>
        </table>
    </div>

    <script src="calculator.js"></script>
</body>
</html>

In the above example, a text box with the id "result" is used to display the calculation results. Then, a simple calculator interface was built using table tags and button tags. On each button, an onclick event is used to trigger the corresponding action.

Next, we need to write JavaScript code to implement the logic of the calculator. The following is an example of JavaScript code used to control the operation of the calculator:

var expression = ""; // 保存用户输入的表达式

// 追加数字
function appendNumber(num) {
    expression += num;
    document.getElementById("result").value = expression;
}

// 追加运算符
function appendOperator(operator) {
    expression += operator;
    document.getElementById("result").value = expression;
}

// 进行计算
function calculate() {
    try {
        var result = eval(expression);
        document.getElementById("result").value = result;
        expression = result;
    } catch (error) {
        // 处理错误情况
        document.getElementById("result").value = "错误";
        expression = "";
    }
}

In the above code, three functions are defined: appendNumber, appendOperator and calculate. appendNumber function is used to append numbers to expressions; appendOperator function is used to append operators to expressions; calculate function is used to perform calculations and display the results .

Finally, we need to use CSS to style the calculator interface. The following is a simple CSS code example:

.calculator {
    margin: 50px auto;
    width: 200px;
}

table {
    width: 100%;
    border-collapse: collapse;
}

td {
    border: 1px solid #ccc;
    padding: 10px;
    text-align: center;
}

button {
    width: 100%;
    height: 100%;
    background-color: #f5f5f5;
    border: none;
    cursor: pointer;
}

In the above CSS code, some basic styles are used to beautify the calculator interface.

With the above code example, we can build a simple online calculator. Users can enter numbers and operators by clicking buttons, and the calculator will automatically perform the relevant calculations and display the results. This calculator can be used for simple mathematical operations such as addition, subtraction, multiplication, division and decimal operations.

To summarize, it is feasible to write an online calculator through JavaScript. We only need to use HTML to build the interface, CSS for styling, and then use JavaScript to implement the logic of the calculator. I hope the content of this article is helpful to you, and I wish you good luck in building an online calculator using JavaScript!

The above is the detailed content of Build an online calculator using JavaScript. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Building a real-time weather forecast application based on JavaScriptNext article：Building a real-time weather forecast application based on JavaScript

See more

Build an online calculator using JavaScript

Related articles