[JAVASCRIPT/실습] 자바스크립트를 이용한 아주 간단한 계산기

자바스크립트를 이용하여 간단하게 계산기를 만들어 보았습니다.

물론 현재 오류는 존재합니다.

만든 목적은 그냥 아주 간단한 계산기를 만들기 위함입니다.

[소스코드]

<!DOCTYPE html>

<head>
<meta charset="EUC-KR">
<title>계산기</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<script>
	function Calculator(){

var self = this;
		this.input = $("#calcInput span");

this.bindEvent = function(){

$("td").on("click", function(){

var key = $(this).text();

var value = self.input.text() == '0' ? '' : self.input.text();

if( key == '='){
					value = value.replace(/×/gi, '*');
					self.input.text( eval("(" +  value + ")"));
				}
				else{
					self.input.text( value + key);
				}

})

console.log("BindEvent();")
		}

this.reset = function(){
			this.input.text("0");
		}

this.init = function(){
			this.reset();
			this.bindEvent();
		}
	};

$(document).ready(function(){
		var calc = new Calculator();
		calc.init();
	})

</script>
<style>
	#wrap {
		width: 400px;
		height: 500px;
		margin: 0 auto;
		margin-top: 10%;
		border:  1px solid black;
		border-radius:6px;
		padding: 10px 5px 5px 5px;
		background: url("D:/dev/workspace/Calc/html/Green-Natural-Background-Vector-Illustration.jpg") no-repeat;
	}

#calcBtnTable {
		text-align : center;
		width: 100%;
		height: 380px;
		border-spacing: 5px;
    	border-collapse: separate;
    	position: relative;
    	margin-top : 5px;
    	margin-bottom : 5px;
	}

#calcTitle {
		height:50px;
		width : 100%;
		text-align: center;
		font-size: 20px;
		font-weight: bold;
		display: table;
	}

#calcTitle span {
		display: table-cell;
		text-align: left;
		vertical-align: middle;
		text-align: center;
	}

#calcInput {
		height:50px;
		width : 100%;
		border:  1px solid black;
		border-radius:6px;
		font-size: 18px;
		text-align: right;
		display: table;
		padding-right: 10px;
	}

#calcInput span {
		display: table-cell;
		text-align: left;
		vertical-align: middle;
		text-align: right;
	}

table td {
		vertical-align: middle;
		font-weight: bold;
		font-size: 22px;
		background-color: #D5D5D5;
		border-radius:6px;
		border: 1px solid black;
	}
</style>
</head>

[결과]

저작자표시 (새창열림)

검색 태그

티스토리툴바