>웹 프론트엔드 >JS 튜토리얼 >js에서 간단한 계산기를 구현하는 방법

js에서 간단한 계산기를 구현하는 방법

王林
王林앞으로
2020-03-12 11:17:532450검색

js에서 간단한 계산기를 구현하는 방법

렌더링:

js에서 간단한 계산기를 구현하는 방법

우선 본문에 페이지에 필요한 요소들을 생성합니다

<body>
 <input type="text" id="ipt1">
 <select name="" id="slt">
  <option value="+">+</option>
  <option value="-">-</option>
  <option value="*">*</option>
  <option value="/">/</option>
 </select>
 <input type="text" id="ipt2">
 <button id="btn">=</button>
 <input type="text" id="ipt3">
</body>

사용하기 쉬운 한 위의 ID를 선택하시면 됩니다.

(추천 튜토리얼: javascript 튜토리얼)

javascript 코드:

<body>
 <script>
  //获取页面标签的元素
  var inpt1 = document.getElementById("ipt1");
  var inpt2 = document.getElementById("ipt2");
  var inpt3 = document.getElementById("ipt3");
  var selt = document.getElementById("slt");
  var butn = document.getElementById("btn");
   
 //给等于按钮添加点击事件
  butn.onclick = function(){
   //将三个输入框的value值分别赋给变量t1,t2,t3中
   var t1 = parseFloat(ipt1.value);
   var t2 = parseFloat(ipt2.value);
   var t3 = parseFloat(ipt3.value);
 
 //定义一个结果变量用于存放结果
   var endValue;
   //用switch语句来写运算语句
   switch(slt.value){
    case "+":
    endValue = t1 + t2;
    break;
    case "-":
    endValue = t1 - t2;
    break;
    case "*":
    endValue = t1 * t2;
    break;
    case "/":
    endValue = t1 / t2;
    break;
    default:
    endValue = t1 + t2;
    break;
   }
   //将结果放入结果输入框的value值中,在页面上显示
   inpt3.value = endValue;
  }
 </script>
</body>

관련 영상 튜토리얼 추천: javascript 영상 튜토리얼

위 내용은 js에서 간단한 계산기를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 jb51.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제