본문 바로가기

javascript/jQuery

1day - 계산기



계산기

1. 계산기 레이아웃

2. 클릭 이벤트

3. 변수 저장

4. 오퍼레이터 조건문


5. 변수 연산


특수문자 코드표 : http://dev.w3.org/html5/html-author/charref

How to print a number with commas as thousands separators in JavaScript
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