Home > Article > Web Front-end > How to implement a simple calculator function using JavaScript?

How to implement a simple calculator function using JavaScript?

王林Original: 2023-10-27 14:51:421159browse

如何使用 JavaScript 实现一个简单的计算器功能？

How to use JavaScript to implement a simple calculator function?

The calculator is one of the commonly used tools in our daily life. It can be used to perform simple mathematical operations. Today, we will implement a simple calculator function using JavaScript. In this article, I'll show you how to write code using JavaScript to implement basic math operations and a calculator interface.

First, we need to create an HTML file that contains a text box, number buttons, and operator buttons for displaying the results of the operation. The following is the basic HTML structure:

<!DOCTYPE html>
<html>
<head>
    <title>简单计算器</title>
    <style>
        /* 样式可以根据个人喜好进行自定义 */
    </style>
</head>
<body>
    <input type="text" id="result" readonly>
    <br>
    <button onclick="buttonClick('1')">1</button>
    <button onclick="buttonClick('2')">2</button>
    <button onclick="buttonClick('3')">3</button>
    <button onclick="buttonClick('+')">+</button>
    <br>
    <button onclick="buttonClick('4')">4</button>
    <button onclick="buttonClick('5')">5</button>
    <button onclick="buttonClick('6')">6</button>
    <button onclick="buttonClick('-')">-</button>
    <br>
    <button onclick="buttonClick('7')">7</button>
    <button onclick="buttonClick('8')">8</button>
    <button onclick="buttonClick('9')">9</button>
    <button onclick="buttonClick('*')">*</button>
    <br>
    <button onclick="buttonClick('0')">0</button>
    <button onclick="buttonClick('.')">.</button>
    <button onclick="buttonClick('=')">=</button>
    <button onclick="buttonClick('/')">/</button>
    <br>
    <button onclick="clearResult()">清空</button>
</body>
</html>

In the above HTML code, we use a text box (id is "result") to display the result of the operation, and add number buttons, operator buttons and clear button. Each button has an onclick event, which calls a JavaScript function named buttonClick to handle button click events.

Next, we need to write the implementation of the buttonClick and clearResult functions in a JavaScript file. The following is a sample code:

function buttonClick(value) {
    var result = document.getElementById("result");

    if (value === '=') {
        result.value = eval(result.value); // 使用 eval 函数计算表达式
    } else {
        result.value += value;
    }
}

function clearResult() {
    document.getElementById("result").value = "";
}

In the buttonClick function, we first obtain the reference to the text box through the getElementById method, and then perform different processing based on the value of the button . If the button's value is the equal sign (=), we will use the eval function to evaluate the expression and display the result in the text box. Otherwise, we append the button's value to the text box's content.

clearResult The function simply sets the value of the text box to an empty string, realizing the clearing function.

Now, you can save the above HTML code and JavaScript code to the corresponding files and open the HTML file in the browser. You'll see a simple calculator interface that allows you to perform basic mathematical operations.

This is just a simple calculator example, which only implements the basic four arithmetic functions. If you want to implement more complex calculator functions, such as supporting brackets, trigonometric functions, etc., you need to further improve the code. But with this example, you can see how to use JavaScript to implement a simple calculator function.

I hope this article can help you, and I wish you happy programming!

The above is the detailed content of How to implement a simple calculator function using JavaScript?. For more information, please follow other related articles on the PHP Chinese website!

JavaScript html 运算符字符串事件

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：How to use JavaScript to achieve a seamless loop effect of image carousels?Next article：How to use JavaScript to achieve a seamless loop effect of image carousels?

See more

How to implement a simple calculator function using JavaScript?

Related articles