개발관련/javascript&jquery

javascript/jquery 활용해서 간편 계산기 만들기!

🐻곰이🐻 2020. 11. 24.

728x90

최종 코드

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>

	<script>

	//계산 함수
	function calculator(val)
	{
		$("#cal").text($("#cal").text()+val);

		return false;
	}

	//계산하여 대입해주기
	function cal()
	{
		var result = eval($("#cal").text());

		$("#cal_val").text(result);
	}

	//리셋 하기
	function reset()
	{
		$("#cal").text("");
		$("#cal_val").text("");
	}
	</script>
</head>
<style>
	table tr td{text-align: -webkit-center};
</style>
<body>
	<table border="1" style="width:500px; height:300px;">
		<tr>
			<td colspan="4" id="cal" style="height:30px;"></td>
		</tr>
		<tr>
			<td colspan="4" id="cal_val" style="height:30px;"></td>
		</tr>
		<th style="width:150px;">
			개발쉽게하자곰
		</th>
		<th>
		</th>
		<th onclick="reset(); return false;">C</th>
		<th onclick="calculator('/'); return false;">/</th>
		<tr>
			<td onclick="calculator('7'); return false;">7</td>
			<td onclick="calculator('8'); return false;">8</td>
			<td onclick="calculator('9'); return false;">9</td>
			<td onclick="calculator('+'); return false;">+</td>
		</tr>
		<tr>
			<td onclick="calculator('4'); return false;">4</td>
			<td onclick="calculator('5'); return false;">5</td>
			<td onclick="calculator('6'); return false;">6</td>
			<td onclick="calculator('-'); return false;">-</td>
		</tr>
		<tr>
			<td onclick="calculator('1'); return false;">1</td>
			<td onclick="calculator('2'); return false;">2</td>
			<td onclick="calculator('3'); return false;">3</td>
			<td onclick="calculator('*'); return false;">*</td>
		</tr>
		<tr>
			<td>
			</td>
			<td onclick="calculator('0'); return false;">0</td>
			<td>
			</td>
			<td onclick="cal(); return false;">=</td>
		</tr>
	</table>
</body>
</html>

오늘의 주제는 계산기인데요 제이쿼리로도 계산기 간편하게 만들수있어요!

시간이 나서 잠깐 만들어보려고 해요

우선 기본 틀 부터 만들어야해요.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>easy-developmentbear</title>
</head>
	<body>

	</body>
</html>

저는 에디트 플러스라는 툴을 써요!

www.editplus.com/kr/download.html

에디트플러스 문서 편집기 - 평가판 무료 다운로드

평가판 무료 다운로드 에디트플러스는 쉐어웨어로 배포되므로 다운로드해서 30일 동안 사용해 볼 수 있습니다. 만일 프로그램이 유용하다고 판단되어 30일 평가 기간 이후에도 계속 사용하고자

www.editplus.com

여기서 다운받을수있어요 필요하신분은 다운받아서 쓰시면 되겠습니다~!

자 그런다음 우리는 jquery 제이쿼리를 쓰려면 스크립트를 불러와야하는데 저는 CDN을 쓰겠습니다.

<script src="https://code.jquery.com/jquery-latest.min.js"></script>

헤드부분에 넣어주면됩니다. 추가하는부분은

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 CDN 최신버전 -->
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
	<body>

	</body>
</html>

이렇게 추가해주면되요! 쉽죠???

그다음에 테이블을 만들어줄게요!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>easy-developmentbear</title>
	<!-- 제이쿼리 -->
	<script src="https://code.jquery.com/jquery-latest.min.js"></script>
</head>
	<body>
		<table border="1" style="width:500px; height:300px;">
		</table>
	</body>
</html>

이렇게 테이블 만들었어요 form을 사용하여 테이블을 감싸도 되지만 우선 이렇게할게요!

그 다음은 테이블을 꾸며야해요 계산기처럼 우선 만들어볼게요!

<body>
	<table border="1" style="width:500px; height:300px;">
		<tr>
			<td colspan="4" id="cal" style="height:30px;"></td>
		</tr>
		<tr>
			<td colspan="4" id="cal_val" style="height:30px;"></td>
		</tr>
		<th style="width:150px;">
			개발쉽게하자곰
		</th>
		<th>
		</th>
		<th>
			<button>C</button>
		</th>
		<th>
			<button>/</button>
		</th>
		<tr>
			<td>
				<button>7</button>
			</td>
			<td>
				<button>8</button>
			</td>
			<td>
				<button>9</button>
			</td>
			<td>
				<button>+</button>
			</td>
		</tr>
		<tr>
			<td>
				<button>4</button>
			</td>
			<td>
				<button>5</button>
			</td>
			<td>
				<button>6</button>
			</td>
			<td>
				<button>-</button>
			</td>
		</tr>
		<tr>
			<td>
				<button>1</button>
			</td>
			<td>
				<button>2</button>
			</td>
			<td>
				<button>3</button>
			</td>
			<td>
				<button>*</button>
			</td>
		</tr>
		<tr>
			<td>
			</td>
			<td>
				<button>0</button>
			</td>
			<td>
			</td>
			<td>
				<button>=</button>
			</td>
		</tr>
	</table>
</body>

소스를 출력해보면~

음...뭔가 안이쁘네요 ㅎㅎ

버튼들을 중앙으로 맞춰줄게요

<style>
	table tr td{text-align: -webkit-center};
</style>

헤드부분 아래에 넣어주세요

이렇게 나름 계산기 인 척??? 하는 테이블이 완성되었어요 그 다음은 소스 작업을 해야합니다.

버튼을 눌렀을때! 위에 값이 들어가야한다? 저는 버튼들에 대해서 onclick 이벤트 를 주고 함수를 만들어 계산식이 적용되게 만들겠습니다.

여기 보시면 버튼을 눌렀을때 onclick 속성으로 줄 함수를 만들었습니다. 파라미터 val 값을 받아와 태그의 id가 cal인 text에 파라미터 값을 넣어주겠다는 말입니다. 누를 때마다 추가되어야 하기에
$("#cal").text(val); 이렇게 하면 안됩니다~

현재 text값을 가져와 뒤에 계속 붙이는 형식으로 가야합니다.
$("#cal").text($("#cal").text()+val);
이렇게 해야 누르면 값이 뒤에 계속붙습니다 ㅎㅎ

원래는 input 테그를 써서 하려고 했지만 이렇게도 해보고싶어서...

자 그러면 이제 계산을 해야겠죠??

계산하는 함수를 만들었어요. eval을 써서 text값을 가져와 계산하는 방식이 제일 쉽고 간편해서 ㅎㅎ

변수 var로 result 생성하고 그안에 eval안에 id가 cal인 text값을 불러와 계산하고
id값이 cal_val인 text값에 넣어주게끔 했어요

이렇게 하고 =부분에 onclick 이벤트를 주세요!

이렇게 해야 눌렀을때 반응을 하겠죠???

한번 중간점검 해볼께요

잘되네요 ㅎㅎ 근데 새로고침해야 계산을 다시할수있어서....

C버튼에 reset기능을 추가해볼게요!

이렇게 reset이라는 함수를 만들었어요.

id가 cal 그리고 cal_val이라는 테그의 text값을 "" << 빈값으로 만들겠다는 거에요 ㅎㅎ

그다음에 onclick 부분 보여드릴게요!

이렇게 넣어주시면 됩니다 ㅎㅎ

최종 완성입니다.

easy-developmentbear

개발쉽게하자곰		C	/


7	8	9	+
4	5	6	-
1	2	3	*
	0		=

+ 22.08.16 추가

버튼 제거 후 td에 onclick 옵션 먹이고 텍스트로 기입했습니다.

이렇게 취소도 되면서 계산하는부분까지 완성되었습니다~

궁금하신 점 있으시면 언제든 댓글남겨주세요~~

개발자분들 또는 개발에 관심있으신분들 모두 화이팅하세요!!

저작자표시 비영리 변경금지

'개발관련 > javascript&jquery' 카테고리의 다른 글

Counter.js 를 써서 티스토리 블로그 방문자 수 애니메이션 효과 넣기 (2)	2022.08.19
[Jquery/Javascript] 핸드폰번호 정규식 및 숫자만 입력되게 하는법 (0)	2022.08.02
[Jquery/Javascript] 체크박스 전체 선택과 전체 해제 구현하기 (0)	2022.08.02
[html/css/javascript/jquery] 셀렉터(Selector) 활용법! (0)	2020.11.25
Javascript & Jquery / "onblur" 속성으로 1000단위 콤마찍기! (0)	2020.11.24
[Javascript/Jquery] 제이쿼리로 천 단위 콤마 (1,000) 세자리마다 콤마찍기! (0)	2020.11.24

javascript/jquery 활용해서 간편 계산기 만들기!

'개발관련 > javascript&jquery' 카테고리의 다른 글

댓글

티스토리툴바