```여기서 `type="text"`는 입력 상자 유형 텍스트의 경우 `id="inp"> JAVAscript 입력 정수 및 합계-프런트엔드 Q&A-php.cn

JAVAscript 입력 정수 및 합계

PHPz
풀어 주다: 2023-05-12 15:50:39
원래의
1077명이 탐색했습니다.

JavaScript는 웹 개발에 널리 사용되는 프로그래밍 언어로 프런트 엔드 페이지의 개발과 상호 작용을 촉진할 수 있습니다. 오늘은 자바스크립트에서 정수를 입력하고 합하는 방법을 배워보겠습니다.

JavaScript에서는 다음 코드를 통해 웹 페이지에 텍스트 입력 상자를 만들 수 있습니다.

로그인 후 복사

그 중type="text"는 입력 상자 유형이 텍스트임을 나타내고 < code>id="inputNum "은 입력 상자의 식별자가 "inputNum"임을 나타내며 나중에 JavaScript에서 호출할 때 편리합니다.type="text"表示输入框类型为文本,id="inputNum"表示输入框的标识符为"inputNum",方便后面在JavaScript中调用。

接下来,我们需要创建一个求和的函数,可以通过以下代码实现:

function sum() { var input = document.getElementById("inputNum").value; // 获取输入框中的值 var nums = input.split(","); // 将输入的字符串以逗号为分隔符拆分成数字数组 var total = 0; for (var i = 0; i < nums.length; i++) { total += parseInt(nums[i]); // 将数组中的每个元素转换为整数并累加 } alert("总和为:" + total); // 弹出提示框显示结果 }
로그인 후 복사

在上述代码中,document.getElementById("inputNum")表示获取id为inputNum的元素,.value表示获取该元素中输入的值。input.split(",")表示将输入的字符串以逗号为分隔符拆分成数字数组。total += parseInt(nums[i])表示将数组中的每个元素转换为整数并累加。最后,通过alert函数弹出提示框显示计算结果。

最后,我们需要在网页中创建一个按钮,当用户点击按钮时,调用上面编写的求和函数。以下是完整的代码:

         输入整数并求和
         
로그인 후 복사

在上述代码中,onclick="sum()"表示当用户点击按钮时调用求和函数sum()

다음으로 다음 코드를 통해 구현할 수 있는 합계 함수를 만들어야 합니다.

rrreee

위 코드에서 document.getElementById("inputNum")는 다음을 사용하여 요소를 가져오는 것을 의미합니다. inputNum 의 id인 .value는 이 요소에 입력된 값을 가져오는 것을 의미합니다. input.split(",")은 쉼표를 구분 기호로 사용하여 입력 문자열을 숫자 배열로 분할하는 것을 의미합니다. total += parsInt(nums[i])는 배열의 각 요소를 정수로 변환하여 누적하는 것을 의미합니다. 마지막으로 alert함수는 계산 결과를 표시하는 프롬프트 상자를 표시합니다. 마지막으로 웹페이지에 버튼을 생성해야 합니다. 사용자가 버튼을 클릭하면 위에 작성된 sum 함수가 호출됩니다. 전체 코드는 다음과 같습니다. rrreee위 코드에서 onclick="sum()"은 사용자가 클릭할 때 합산 함수 sum()가 호출된다는 의미입니다. 버튼. 페이지에 여러 숫자를 쉼표로 구분하여 입력하고 "합계" 버튼을 클릭하여 합계를 구하세요. 정수를 입력하고 합하는 자바스크립트 방식은 매우 간단하며, 위의 코드를 통해 쉽게 구현할 수 있습니다. 실제 웹 개발에서는 보다 완전한 기능을 달성하기 위해 필요에 따라 수정하고 최적화할 수 있습니다.

위 내용은 JAVAscript 입력 정수 및 합계의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!