로그인

검색

2015.01.21 16:34

간단한 계산 소스

조회 수 1670 추천 수 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>

웹코드

자바스크립트

List of Articles
번호 분류 제목 글쓴이 날짜 조회 수
52 지정된 날짜 카운터 소스 D-DAY 카운터 소스 디데이 카운터 소스 보석 2012.08.21 13375
51 마우스 오른쪽 버튼 막기, 오른쪽 마우스 금지 / 왼쪽마우스 텍스트 선택 방지 소스 보석 2012.10.31 7076
50 기본 자바스크립트 창을 열면 간단한 맨트 날리기 보석 2013.09.03 3151
49 기본 접속하면 이름을 물어보고 그 이름으로 인사하기 보석 2013.09.03 2919
48 기타 타사이트 자바스크립트 배껴쓰기 part1 file 보석 2013.09.04 2606
47 기타 타사이트 자바스크립트 배껴쓰기 part2 file 보석 2013.09.04 2556
46 기타 타사이트 자바스크립트 배껴쓰기 part3 file 보석 2013.09.04 2442
45 기본 쿠키를 이용한 방문 횟수 카운터 스크립트 보석 2013.09.04 4040
44 기본 시간별로 배경화면 다르게 출력하는 스크립트 보석 2013.09.04 3623
43 기본 이미지에 마우스를 올리기만 해도 해당 링크로 이동되는 스크립트 보석 2013.09.04 3182
42 기본 이미지에 마우스를 올리기만 해도 해당 링크로 팝업되는 스크립트 보석 2013.09.05 2718
41 기본 단축키 지정 스크립트 보석 2013.09.05 2786
40 기본 질문 후 확인 누르면 홈페이지 진입 스크립트 보석 2013.09.05 2790
39 기본 시간대 별로 다른 맨트 날리는 스크립트 보석 2013.09.05 2760
38 기본 한 링크에 랜덤으로 이동하는 URL 넣기 보석 2013.09.05 3105
37 기본 랜덤 배너 스크립트 (이미지, 텍스트, 배경음악) 보석 2013.09.05 3015
36 기본 로그인창 만드는 스크립트 보석 2013.09.06 3472
35 기본 홈페이지 진입시 간단한 맨트 넣기 보석 2013.09.06 2715
34 기본 지정된 날자에서 몇일 지났는지 알려주는 스크립트 보석 2013.09.06 2952
33 기본 화면 흔들어주는 스크립트 보석 2013.09.06 4449
Board Pagination Prev 1 2 ... 3 Next
/ 3