JavaScript를 사용하여 온라인 계산기 만들기-JS 튜토리얼-php.cn

JavaScript를 사용하여 온라인 계산기 만들기

WBOY

풀어 주다： 2023-08-09 15:46:49

원래의

1506명이 탐색했습니다.

JavaScript를 사용하여 온라인 계산기 만들기

인터넷이 발전하면서 점점 더 많은 도구와 애플리케이션이 온라인 형태로 등장하기 시작했습니다. 그 중에서도 계산기는 가장 널리 사용되는 도구 중 하나입니다. 이 문서에서는 JavaScript를 사용하여 간단한 온라인 계산기를 만드는 방법을 설명하고 코드 예제를 제공합니다.

시작하기 전에 기본적인 HTML 및 CSS 지식을 알아야 합니다. 계산기 인터페이스는 HTML 테이블 요소를 사용하여 구축한 다음 CSS를 사용하여 스타일을 지정할 수 있습니다. 다음은 기본 계산기 인터페이스에 대한 HTML 코드 예입니다.

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

로그인 후 복사

위 예에서는 ID가 "result"인 텍스트 상자를 사용하여 계산 결과를 표시합니다. 그런 다음 테이블 태그와 버튼 태그를 사용하여 간단한 계산기 인터페이스를 구축했습니다. 각 버튼에서 onclick 이벤트는 해당 작업을 트리거하는 데 사용됩니다.

다음으로 계산기의 로직을 구현하기 위한 JavaScript 코드를 작성해야 합니다. 다음은 계산기의 작동을 제어하는 데 사용되는 JavaScript 코드의 예입니다.

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

로그인 후 복사

위 코드에는 세 가지 함수가 정의되어 있습니다. appendNumber、appendOperator和calculate。appendNumber函数用于追加数字到表达式中；appendOperator函数用于追加运算符到表达式中；calculate함수는 계산을 수행하고 결과를 표시하는 데 사용됩니다.

마지막으로 CSS를 사용하여 계산기 인터페이스의 스타일을 지정해야 합니다. 다음은 간단한 CSS 코드 예입니다.

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

로그인 후 복사

위 CSS 코드에서는 계산기 인터페이스를 아름답게 하기 위해 몇 가지 기본 스타일이 사용되었습니다.

위의 코드 예제를 사용하면 간단한 온라인 계산기를 만들 수 있습니다. 사용자는 버튼을 클릭하여 숫자와 연산자를 입력할 수 있으며, 계산기는 자동으로 관련 계산을 수행하고 결과를 표시합니다. 이 계산기는 덧셈, 뺄셈, 곱셈, 나눗셈, 소수 연산과 같은 간단한 수학 연산에 사용할 수 있습니다.

요약하자면 JavaScript를 통해 온라인 계산기를 작성하는 것이 가능합니다. HTML을 사용하여 인터페이스를 구축하고 CSS를 사용하여 스타일을 지정한 다음 JavaScript를 사용하여 계산기의 논리를 구현하면 됩니다. 이 기사의 내용이 여러분에게 도움이 되기를 바라며, JavaScript를 사용하여 온라인 계산기를 구축하는 데 행운이 있기를 바랍니다!

위 내용은 JavaScript를 사용하여 온라인 계산기 만들기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!