로그인

검색

2015.01.21 16:34

간단한 계산 소스

조회 수 1497 추천 수 0 댓글 1
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 게시글 수정 내역 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 게시글 수정 내역 댓글로 가기 인쇄
Extra Form


<script type="text/javascript">
  function Display_num() {
    //대입 숫자
    var num1=document.getElementById("num1").value;
    var num2=document.getElementById("num2").value;
    var num3=document.getElementById("num3").value;

    //연산자
    var operation1=document.getElementById("operation1").value;
    var operation2=document.getElementById("operation2").value;
    //결과값 넣기
    document.getElementById("is_nums").innerHTML =eval(num1+operation1+num2+operation2+num3); 


  }
</script>


<input type="text" id="num1" style="width:70px;" value="" />
<select id="operation1" style="width:70px;">
<option value=''>연산</option>
<option value='*'>곱하기</option>
<option value='/'>나누기</option>
<option value='+'>더하기</option>
<option value='-'>빼기</option>
</select> 
<input type="text" id="num2" style="width:70px;" value="" />
<select id="operation2" style="width:70px;">
<option value=''>연산</option>
<option value='*'>곱하기</option>
<option value='/'>나누기</option>
<option value='+'>더하기</option>
<option value='-'>빼기</option>
</select> 
<input type="text" id="num3" style="width:70px;" value="" />


<br />
<br />
<br />
<div id="is_nums">계산 결과</div>
<br />
<a href="#" onclick="Display_num();return false;">계산하기</a>



------------------------------------------------------------------

설명

인풋 박스에 원하는 값을 넣고 셀렉트 박스 안의 연산자를 선택하면 셀렉트 박스의 value값은 선택한 값이
들어가게 됩니다
그러면 연산을 할수 있는 조건이 됩니다


<a href="#" onclick="Display_num();return false;">계산하기</a>
이부분에 의해 버튼을 크릭하게 되면 Display_num() 라는 함수가 호출되게 됩니다


    var num1=document.getElementById("num1").value;
    var num2=document.getElementById("num2").value;
    var num3=document.getElementById("num3").value;

대입하는 숫자의 인풋 박스 값을
변수로 지정해 줬습니다 계산을 넘기는 부분에 직접 써줘도 되지만 코드를 줄이고 보기 좋게하기 위해서입니다


    var operation1=document.getElementById("operation1").value;
    var operation2=document.getElementById("operation2").value;

마찬가지로 변수로 지정해 줬고 연산하는 셀렉트 박스의 value값입니다

    document.getElementById("is_nums").innerHTML =eval(num1+operation1+num2+operation2+num3); 

이부분이 is_nums라는 이름을 가진 div에 값을 넣어주게 됩니다

a=b;
a의 값은 b와 같다
차례 차례 받아온 값들을 나열해서 붙여주면 value값에 의해 연산이 됩니다 그 값을 제대로 표현하기 
위해서 eval(); 로 묶어줍니다


  • ?
    보석 2015.01.21 16:36
    <script>
    // 자동 계산 (딜러 할인)
    function avg_price() {
    goodsprice = parseFloat(form.goodsprice.value);
    commem_dc = parseFloat(form.commem_dc.value);
    form.totalprice.value = Math.round(goodsprice -((goodsprice * commem_dc) / 100));
    }

    // 숫자와 도트(.)만 허용
    function onlyDotNum(){
    var eCode = event.keyCode;
    if ( ! ( eCode == 46 || (( eCode > 47 && eCode < 58 )) ) )
    return false;
    }

    // 숫자만 허용
    function onlyNum() {
    if ((event.keyCode < 48) || (event.keyCode > 57)) {
    event.returnValue = false;
    }
    }
    </script>


    <form name="form">
    판매가입력 : <input name="goodsprice" type="text" size="15" maxlength="10" style="ime-mode:disabled;" onkeyup="avg_price();" onkeypress="onlyNum()" /> 원

    할인율입력: <input name="commem_dc" type="text" size="5" maxlength="3" style="ime-mode:disabled;" onkeyup="avg_price();" onkeypress="return onlyDotNum()" value="0" /> %

    할인가는 <input type="text" name="totalprice" size="5" value="0" readonly="" style="text-align:right" /> 원 입니다.
    </form>

웹코드

자바스크립트

  1. Math.abs // Math.round 뜻

    Date2015.01.27 By보석 Views1821
    Read More
  2. 계산기 html 소스

    Date2015.01.21 By보석 Views1516
    Read More
  3. 간단한 계산 소스

    Date2015.01.21 By보석 Views1497
    Read More
  4. 보기좋은 글자 효과 배너 스크립트

    Date2013.09.12 Category기본 By보석 Views4804
    Read More
  5. 앞으로 가기, 뒤로가기 버튼 스크립트

    Date2013.09.12 Category기본 By보석 Views4592
    Read More
  6. 클릭하면 이메일 보내기 실행하는 스크립트

    Date2013.09.12 Category기본 By보석 Views4662
    Read More
  7. 버튼을 누르면 경고 맨트 출력 스크립트

    Date2013.09.12 Category기본 By보석 Views4670
    Read More
  8. 좋아하는 색상을 입력하면 배경으로 출력하는 스크립트

    Date2013.09.12 Category기본 By보석 Views4656
    Read More
  9. 배경음악 스크립트

    Date2013.09.12 Category기본 By보석 Views4729
    Read More
  10. 랜덤 배경 스크립트

    Date2013.09.09 Category기본 By보석 Views4587
    Read More
  11. 배경 출력 후 원하는 링크로 이동 시키는 스크립트

    Date2013.09.09 Category기본 By보석 Views4179
    Read More
  12. 배경색 스크롤 박스 선택 스크립트(미리보기 참조)

    Date2013.09.09 Category기본 By보석 Views3955
    Read More
  13. 해당 링크에 마우스를 올리면 배경색이 바뀌는 스크립트

    Date2013.09.09 Category기본 By보석 Views4013
    Read More
  14. 배경에 나이트클럽 효과 주는 스트립트

    Date2013.09.09 Category기본 By보석 Views3856
    Read More
  15. 배경색 변하는 버튼 스크립트

    Date2013.09.09 Category기본 By보석 Views3812
    Read More
  16. 배경화면 플래시(번쩍이는) 효과 스크립트

    Date2013.09.08 Category기본 By보석 Views4189
    Read More
  17. 양쪽 마우스 금지(제한) 스크립트

    Date2013.09.08 Category기본 By보석 Views3957
    Read More
  18. 왼쪽 마우스 금지(제한) 스크립트

    Date2013.09.08 Category기본 By보석 Views4077
    Read More
  19. 오른쪽 마우스 금지 스크립트

    Date2013.09.08 Category기본 By보석 Views4133
    Read More
  20. 다양한 css 링크스타일 입니다.

    Date2013.09.08 Category기본 By보석 Views3903
    Read More
Board Pagination Prev 1 2 ... 3 Next
/ 3