이 글에서는 기본 4가지 연산을 구현하고 검증 기능을 갖춘 JavaScript로 구현된 매우 간단한 계산기 기능을 주로 소개합니다. 코드에는 이해하기 쉽도록 자세한 설명이 포함되어 있습니다.
The 이 기사의 예는 JavaScript로 구현된 매우 간단한 계산기 기능에 대해 설명합니다. 참고용으로 모두와 공유하세요. 자세한 내용은 다음과 같습니다.
실행 효과를 먼저 살펴보겠습니다.
특정 코드:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>www.jb51.net JS计算器</title> <script type="text/javascript"> // window.onload 获取元素getElementById window.onload = function(){ var oTxt1 = document.getElementById('val01'); var oTxt2 = document.getElementById('val02'); var oFuhao = document.getElementById('fuhao'); // 这三个要放在button函数里面,因为s1.value是获取input里面的输入,但是这个时候还没有输入了 // var iNum1 = oTxt1.value; // var iNum2 = oTxt2.value; // var iNum3 = oFuhao.value; oBtn = document.getElementById('btn'); // 计算按钮点击事件 oBtn.onclick = function(){ var iNum1 = oTxt1.value; var iNum2 = oTxt2.value; var iNum3 = oFuhao.value; var iResult; //如果两个输入有一个是空的话 //return是让if里面执行结束 if (iNum1=='' || iNum2=='') { alert('不能为空'); return; } //isNaN() 如果是true,说明是非数字,所以如果两个输入中有非数字,就提示alert if (isNaN(iNum1) || isNaN(iNum2)) { alert('不能有字母'); return; } //对+-*/四个操作对应的value进行判断 //如果直接iNum1+iNum2 输出的结果是字符串的拼接 12+24 1224 所以要转换成parseInt整数 if (iNum3 == 0) { iResult = parseInt(iNum1) + parseInt(iNum2) } else if (iNum3 == 1) { iResult = parseInt(iNum1) - parseInt(iNum2) } else if (iNum3 == 2) { iResult = parseInt(iNum1) * parseInt(iNum2) } else if (iNum3 == 3) { iResult = parseInt(iNum1)/parseInt(iNum2) } alert(iResult); } } </script> </head> <body> <h3>计算器</h3> <input type="text" id="val01"> <select id="fuhao"> <option value="0">+</option> <option value="1">-</option> <option value="2">*</option> <option value="3">/</option> </select> <input type="text" id="val02"> <input type="button" id="btn" value="计算"> </body> </html>
위는 제가 편집한 텍스트입니다. 모두에게 도움이 됩니다
관련 기사:
vue의 일반적인 구성 요소 및 프레임워크 구조(자세한 튜토리얼)
anime.js에서 애니메이션 체크박스를 구현하는 방법
위 내용은 JavaScript를 사용하여 계산기를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!