계산기
1. 계산기 레이아웃
2. 클릭 이벤트
3. 변수 저장
4. 오퍼레이터 조건문
5. 변수 연산
특수문자 코드표 : http://dev.w3.org/html5/html-author/charref
1 2 3 | function numberWithCommas(x) { return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");} |
테이블로 레이아웃을 잡는다.
td 태그에 class를 2개를 준다.
btn, 각버튼의속성
예) class="btn num"
그 다음은 css를 넣어준다.
스타일 적용후
확인
그 다음 가장 중요한 js를 구성하면 된다.
~else if 문을 사용해서 계산기를 만들어보았다.
시작 전에 이 js를 넣어줘야 숫자의 " 1,000 " 과 같은 " , "가 생긴다.
btn을 클릭하면 this 에 num 클라스가 있는지 없는지를 판단하고
그것을 이중 if 문으로 opr을 비교해서 dis에 this가 찍힐 수 있도록 한다.
그리고 그밑에 +, -, x, /를 할 수 있도록 opr = $(this).attr("op") 로 값을 불러와서
연상기호에 맞는 a, s, m, d의 조건을 각각 설정해줍니다.
op1, op2 는 다시 값을 설정해줍니다.
op1은 다음 연산을 할 수 있도록 계산한 값을 넣어주고
op2는 다시 0으로 초기화를 해줍니다.
계산한 답을 구할때 result버튼 작동시키기 위해 연산기호에 맞는 조건식을 넣어준다.
그 다음 ac를 누르면 계산을 다시 할 수 있도록 초기화 시켜준다.
소수점을 넣어줘야되지만 본인의 실력이 부족해서 어떤 방법을 쓰면 좋을지 모르겠다.
이 문제는 나중에 해결해 보도록하자.
계산기: http://newlex0124.cafe24.com/test/1day.html
