JavaScript 입력값 계산
- WBOY원래의
- 2023-05-27 11:40:071228검색
JavaScript는 다양한 대화형 효과를 달성하는 데 사용할 수 있는 일반적으로 사용되는 웹 프로그래밍 언어입니다. 이 기사에서는 JavaScript를 사용하여 원의 반경을 입력하고 면적과 원주를 계산하여 출력하는 방법을 소개합니다.
1. 반지름 입력
원의 원주와 면적을 계산하는 첫 번째 단계는 반지름을 입력하는 것입니다. 이는 간단한 HTML 페이지를 통해 달성할 수 있습니다. 먼저 반경을 입력하고 계산을 시작하려면 HTML 파일에 텍스트 상자와 버튼을 만들어야 합니다. 코드는 다음과 같습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>求圆面积和周长</title>
</head>
<body>
<p>请输入圆的半径：</p>
<input type="number" id="radius"></input>
<button onclick="calculate()">计算</button>
<p id="area"></p>
<p id="circumference"></p>
<script src="circle.js"></script>
</body>
</html>이 HTML 페이지에는 텍스트 상자와 계산 버튼이 포함되어 있으며 두 개의 공백도 포함되어 있습니다. 문단 결과를 출력하는 데 사용됩니다. 그 중 텍스트박스의 ID는 "radius"로, 반경 입력값을 구하는데 사용됩니다. 버튼의 onclick 이벤트는 원의 둘레와 면적을 계산하는 데 사용되는 JavaScript 함수 "calculate()"에 바인딩됩니다. 결과는 각각 ID가 "area" 및 "circumference"인 태그로 표시되는 두 개의 단락으로 출력됩니다.
2. 면적 및 둘레 계산
HTML 파일에 "circle.js"라는 JavaScript 파일이 도입되었습니다. 이 파일에는 원의 면적과 원주를 계산하는 함수를 작성합니다. 코드는 다음과 같습니다:
function calculate() {
var radius = document.getElementById("radius").value;
// 计算面积
var area = Math.PI * Math.pow(radius, 2);
document.getElementById("area").innerHTML = "面积: " + area + "平方厘米";
// 计算周长
var circumference = 2 * Math.PI * radius;
document.getElementById("circumference").innerHTML = "周长: " + circumference + "厘米";
}이 함수에는 세 가지 주요 단계가 있습니다. 먼저 JavaScript의 DOM 메서드를 사용하여 사용자가 입력한 원의 반경인 텍스트 상자의 값을 가져옵니다. 그런 다음 PI 상수와 Math 라이브러리의 pow() 함수를 사용하여 원의 면적을 계산합니다. 마지막으로 Math 라이브러리와 입력된 반경을 사용하여 원의 둘레를 계산하고 결과를 HTML 페이지의 두 문단에 출력합니다. 이 예에서는 면적과 둘레를 문자열로 출력하지만 필요에 따라 형식을 지정할 수 있습니다.
3. 테스트 및 확장
이제 브라우저에서 HTML 파일을 열고 테스트를 시작할 수 있습니다. 텍스트 상자에 값을 입력한 후 "계산" 버튼을 클릭하면 페이지에 원의 면적과 둘레가 출력됩니다. 아래 그림과 같이:
입력 값을 변경하고 "계산" 버튼을 여러 번 클릭하여 계산 기능의 정확성을 테스트할 수 있습니다. 또한 이 간단한 JavaScript 프로그램을 확장하여 다른 변수를 허용 및 출력하거나 사용자에게 보다 복잡한 대화형 옵션을 제공할 수 있습니다.
결론
이 기사에서는 JavaScript를 사용하여 원의 반경을 입력하고 면적과 원주를 계산하는 방법을 보여주었습니다. JavaScript는 이러한 대화형 작업을 수행하는 일반적인 도구입니다. HTML과 기타 브라우저 API를 쉽게 조작할 수 있어 웹 애플리케이션과 웹 페이지를 더 쉽고 재미있게 작성할 수 있습니다.
위 내용은 JavaScript 입력값 계산의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!