> 웹 프론트엔드 > JS 튜토리얼 > 간단한 js 계산기 구현

간단한 js 계산기 구현

高洛峰
풀어 주다: 2016-12-08 17:13:15
원래의
1260명이 탐색했습니다.

본 글의 예시는 참고용으로 js 계산기 구현 코드를 공유합니다.

<!DOCTYPE html>
 
<html>
 
 <head>
 
  <meta charset="utf-8"> 
 
  <title></title>
 
  </head>
 
  <body >
 
   <input type=&#39;text&#39; id=&#39;txt1&#39; />
 
   <select id=&#39;select&#39;>      
 
      <option value=&#39;+&#39;>+</option>
 
      <option value="-">-</option>
 
      <option value="*">*</option>
 
      <option value="/">/</option>
 
   </select>
 
   <input type=&#39;text&#39; id=&#39;txt2&#39; />
 
   <input type=&#39;button&#39; value=&#39; = &#39; onclick="count()"/>
 
   <!--通过 = 按钮来调用创建的函数,得到结果-->
 
   <input type=&#39;text&#39; id=&#39;fruit&#39; />
 
 </body>
 
  <script type="text/javascript">
 
   //制做简单计算器
 
     function count() {
 
      var txt1 = document.all.txt1.value;
 
      var txt2 = document.all.txt2.value;
 
      var s=document.all.select.value;
 
      var z;
 
      switch(s){
 
       case "+":                    z=parseFloat(txt1)+parseFloat(txt2);break;
 
      case "-":
 
          z=parseFloat(txt1)-parseFloat(txt2);break;
 
       case                  "*":z=parseFloat(txt1)*parseFloat(txt2);break;
 
      case         "/":z=parseFloat(txt1)/parseFloat(txt2);break;
 
  
 
  
 
        }
 
        document.getElementById("fruit").value=z;
 
  
 
       }
 
     </script>
 
  
 
</html>
로그인 후 복사


관련 라벨:
js
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿