JavaScript를 사용하여 간단한 계산기 기능을 구현하는 방법은 무엇입니까?-JS 튜토리얼-php.cn

JavaScript를 사용하여 간단한 계산기 기능을 구현하는 방법은 무엇입니까?

王林

풀어 주다： 2023-10-27 14:51:42

원래의

1300명이 탐색했습니다.

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

JavaScript를 사용하여 간단한 계산기 기능을 구현하는 방법은 무엇입니까?

계산기는 일상생활에서 흔히 사용되는 도구 중 하나입니다. 간단한 수학 연산을 수행하는 데 사용할 수 있습니다. 오늘은 자바스크립트를 이용하여 간단한 계산기 기능을 구현해보겠습니다. 이 기사에서는 JavaScript를 사용하여 기본 수학 연산과 계산기 인터페이스를 구현하는 코드를 작성하는 방법을 보여 드리겠습니다.

먼저 작업 결과를 표시하기 위해 텍스트 상자, 숫자 버튼, 연산자 버튼이 포함된 HTML 파일을 만들어야 합니다. 다음은 기본 HTML 구조입니다.

<!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>

로그인 후 복사

위 HTML 코드에서는 텍스트 상자(id는 "result")를 사용하여 작업 결과를 표시하고 숫자 버튼, 연산자 버튼 및 지우기 버튼을 추가합니다. 단추. 각 버튼에는 buttonClick이라는 JavaScript 함수를 호출하여 버튼 클릭 이벤트를 처리하는 onclick 이벤트가 있습니다. buttonClick 的 JavaScript 函数，用来处理按钮点击事件。

接下来，我们需要在 JavaScript 文件中编写 buttonClick 和 clearResult 函数的实现。以下是示例代码：

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

로그인 후 복사

在 buttonClick 函数中，我们首先通过 getElementById 方法获取到文本框的引用，然后根据按钮的值进行不同的处理。如果按钮的值是等于号（=），我们将使用 eval 函数来计算表达式，并将结果显示在文本框中。否则，我们将按钮的值追加到文本框的内容后面。

clearResult

다음으로 JavaScript 파일에 buttonClick 및 clearResult 함수 구현을 작성해야 합니다. 다음은 샘플 코드입니다.

rrreee

buttonClick 함수에서는 먼저 getElementById 메서드를 통해 텍스트 상자에 대한 참조를 얻은 다음 이를 기반으로 다양한 처리를 수행합니다. 버튼의 가치. 버튼의 값이 등호(=)인 경우 eval 함수를 사용하여 표현식을 평가하고 결과를 텍스트 상자에 표시합니다. 그렇지 않으면 버튼의 값을 텍스트 상자의 내용에 추가합니다.

clearResult 함수는 단순히 텍스트 상자의 값을 빈 문자열로 설정하여 지우기 기능을 구현합니다.

이제 위의 HTML 코드와 JavaScript 코드를 해당 파일에 저장하고 브라우저에서 HTML 파일을 열 수 있습니다. 기본적인 수학 연산을 수행할 수 있는 간단한 계산기 인터페이스가 표시됩니다. 🎜🎜이것은 기본적인 4가지 산술 함수만 구현한 간단한 계산기 예제입니다. 괄호 지원, 삼각 함수 등 더 복잡한 계산기 기능을 구현하려면 코드를 더욱 개선해야 합니다. 하지만 이 예를 통해 JavaScript를 사용하여 간단한 계산기 기능을 구현하는 방법을 확인할 수 있습니다. 🎜🎜이 기사가 도움이 되기를 바라며, 행복한 프로그래밍을 하시길 바랍니다! 🎜

위 내용은 JavaScript를 사용하여 간단한 계산기 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!