Build an online calculator using JavaScript-JS Tutorial-php.cn

Build an online calculator using JavaScript

WBOY

Release： 2023-08-09 15:46:49

Original

1427 people have browsed it

Build an online calculator using JavaScript

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>

Copy after login

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 = "";
    }
}

Copy after login

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

Copy after login

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!