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
buttonClick 및 clearResult 함수 구현을 작성해야 합니다. 다음은 샘플 코드입니다. rrreee
buttonClick 함수에서는 먼저 getElementById 메서드를 통해 텍스트 상자에 대한 참조를 얻은 다음 이를 기반으로 다양한 처리를 수행합니다. 버튼의 가치. 버튼의 값이 등호(=)인 경우 eval 함수를 사용하여 표현식을 평가하고 결과를 텍스트 상자에 표시합니다. 그렇지 않으면 버튼의 값을 텍스트 상자의 내용에 추가합니다.
clearResult 함수는 단순히 텍스트 상자의 값을 빈 문자열로 설정하여 지우기 기능을 구현합니다. 이제 위의 HTML 코드와 JavaScript 코드를 해당 파일에 저장하고 브라우저에서 HTML 파일을 열 수 있습니다. 기본적인 수학 연산을 수행할 수 있는 간단한 계산기 인터페이스가 표시됩니다. 🎜🎜이것은 기본적인 4가지 산술 함수만 구현한 간단한 계산기 예제입니다. 괄호 지원, 삼각 함수 등 더 복잡한 계산기 기능을 구현하려면 코드를 더욱 개선해야 합니다. 하지만 이 예를 통해 JavaScript를 사용하여 간단한 계산기 기능을 구현하는 방법을 확인할 수 있습니다. 🎜🎜이 기사가 도움이 되기를 바라며, 행복한 프로그래밍을 하시길 바랍니다! 🎜위 내용은 JavaScript를 사용하여 간단한 계산기 기능을 구현하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7415
15
1359
52
76
11
23
19
Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까?
Mar 24, 2024 am 11:27 AM
Huawei 휴대폰에서 이중 WeChat 로그인을 구현하는 방법은 무엇입니까? 소셜 미디어의 등장으로 WeChat은 사람들의 일상 생활에 없어서는 안될 커뮤니케이션 도구 중 하나가 되었습니다. 그러나 많은 사람들이 동일한 휴대폰에서 동시에 여러 WeChat 계정에 로그인하는 문제에 직면할 수 있습니다. Huawei 휴대폰 사용자의 경우 듀얼 WeChat 로그인을 달성하는 것은 어렵지 않습니다. 이 기사에서는 Huawei 휴대폰에서 듀얼 WeChat 로그인을 달성하는 방법을 소개합니다. 우선, 화웨이 휴대폰과 함께 제공되는 EMUI 시스템은 듀얼 애플리케이션 열기라는 매우 편리한 기능을 제공합니다. 앱 듀얼 오픈 기능을 통해 사용자는 동시에
Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법
Mar 24, 2024 pm 06:03 PM
Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 방법 소셜 소프트웨어의 인기와 개인 정보 보호 및 보안에 대한 사람들의 강조가 높아지면서 WeChat 복제 기능이 점차 주목을 받고 있습니다. WeChat 복제 기능을 사용하면 사용자가 동일한 휴대폰에서 여러 WeChat 계정에 동시에 로그인할 수 있으므로 관리 및 사용이 더 쉬워집니다. Huawei 휴대폰에서 WeChat 복제 기능을 구현하는 것은 어렵지 않습니다. 다음 단계만 따르면 됩니다. 1단계: 휴대폰 시스템 버전과 WeChat 버전이 요구 사항을 충족하는지 확인하십시오. 먼저 Huawei 휴대폰 시스템 버전과 WeChat 앱이 최신 버전으로 업데이트되었는지 확인하세요.
PHP 프로그래밍 가이드: 피보나치 수열을 구현하는 방법
Mar 20, 2024 pm 04:54 PM
프로그래밍 언어 PHP는 다양한 프로그래밍 논리와 알고리즘을 지원할 수 있는 강력한 웹 개발 도구입니다. 그중 피보나치 수열을 구현하는 것은 일반적이고 고전적인 프로그래밍 문제입니다. 이 기사에서는 PHP 프로그래밍 언어를 사용하여 피보나치 수열을 구현하는 방법을 소개하고 구체적인 코드 예제를 첨부합니다. 피보나치 수열은 다음과 같이 정의되는 수학적 수열입니다. 수열의 첫 번째와 두 번째 요소는 1이고 세 번째 요소부터 시작하여 각 요소의 값은 이전 두 요소의 합과 같습니다. 시퀀스의 처음 몇 가지 요소
Golang이 어떻게 게임 개발 가능성을 가능하게 하는지 마스터하세요
Mar 16, 2024 pm 12:57 PM
오늘날의 소프트웨어 개발 분야에서 효율적이고 간결하며 동시성이 뛰어난 프로그래밍 언어인 Golang(Go 언어)은 점점 더 개발자들의 선호를 받고 있습니다. 풍부한 표준 라이브러리와 효율적인 동시성 기능으로 인해 게임 개발 분야에서 주목받는 선택이 되었습니다. 이 기사에서는 게임 개발에 Golang을 사용하는 방법을 살펴보고 특정 코드 예제를 통해 Golang의 강력한 가능성을 보여줍니다. 1. 게임 개발에서 Golang의 장점 Golang은 정적인 유형의 언어로서 대규모 게임 시스템을 구축하는 데 사용됩니다.
PHP 게임 요구 사항 구현 가이드
Mar 11, 2024 am 08:45 AM
PHP 게임 요구사항 구현 가이드 인터넷의 대중화와 발전으로 인해 웹 게임 시장이 점점 더 대중화되고 있습니다. 많은 개발자는 PHP 언어를 사용하여 자신만의 웹 게임을 개발하기를 원하며 게임 요구 사항을 구현하는 것이 핵심 단계입니다. 이 문서에서는 PHP 언어를 사용하여 일반적인 게임 요구 사항을 구현하는 방법을 소개하고 특정 코드 예제를 제공합니다. 1. 게임 캐릭터 만들기 웹게임에서 게임 캐릭터는 매우 중요한 요소입니다. 이름, 레벨, 경험치 등 게임 캐릭터의 속성을 정의하고, 이를 운용할 수 있는 방법을 제공해야 합니다.
PHP로 작성된 효율적인 피보나치 수열 계산기
Mar 21, 2024 am 10:06 AM
효율적인 피보나치 수열 계산기: 피보나치 수열의 PHP 구현은 매우 고전적인 수학 문제입니다. 규칙은 각 숫자가 이전 두 숫자의 합과 동일하다는 것입니다. 즉, F(n)=F(n -1)+F입니다. (n-2), 여기서 F(0)=0이고 F(1)=1입니다. 피보나치 수열을 계산할 때 재귀적으로 구현할 수는 있지만 값이 커질수록 성능 문제가 발생합니다. 따라서 이 기사에서는 PHP를 사용하여 효율적인 피보나치 작성 방법을 소개합니다.
Golang에서 정확한 나눗셈 연산을 구현하는 방법
Feb 20, 2024 pm 10:51 PM
Golang에서 정확한 나눗셈 작업을 구현하는 것은 특히 재무 계산과 관련된 시나리오 또는 고정밀 계산이 필요한 기타 시나리오에서 일반적인 요구 사항입니다. Golang에 내장된 나눗셈 연산자 "/"는 부동 소수점 수에 대해 계산되며 때로는 정밀도가 손실되는 문제가 있습니다. 이 문제를 해결하기 위해 타사 라이브러리나 사용자 정의 기능을 사용하여 정확한 분할 작업을 구현할 수 있습니다. 일반적인 접근 방식은 분수 표현을 제공하고 정확한 나눗셈 연산을 구현하는 데 사용할 수 있는 math/big 패키지의 Rat 유형을 사용하는 것입니다.
Mac 시스템 계산기에서 통화를 변환하는 방법 - Mac 시스템 계산기에서 통화를 변환하는 방법
Mar 18, 2024 pm 03:58 PM
여러분, Mac 시스템 계산기에서 환율을 변환하는 방법을 알고 계시나요? 오늘은 Mac 시스템 계산기에서 환율을 변환하는 방법을 설명하겠습니다. 관심이 있으시면 저와 함께 살펴보시기 바랍니다. 1단계: Mac 시스템 계산기를 열고 메뉴 표시줄에서 변환을 클릭합니다. 2단계: 전환 메뉴에서 통화를 클릭하세요. 3단계: 변환할 통화를 선택한 후 변환 버튼을 클릭하세요.
