สร้างเครื่องคิดเลขอย่างง่ายด้วย CSS และ jQuery

CSS Code

<style type="text/css">
.iCalc{
	width:100px;
	display:block;
	background-color:#666666;
	font-size:12px;
	color:#FFFFFF;
	height:115px;
}
.iResult{
	width:95px;
	margin-left:2px;
	margin-top:2px;
	float:left;
	height:20px;
	background-color:#CCCCCC;
	text-align:left;
	color:#000000;
	line-height:20px;
	text-indent:3px;
	overflow:hidden;
}
div.iDigit > div{
	display:block;
	float:left;
	height:20px;
	width:20px;
	text-align:center;
	margin-left:4px;
	margin-top:2px;
	background-color:#000000;
	cursor:pointer;
}
</style>

HTML Code

<div class="iCalc">
<div class="iResult">0</div>
<div class="iDigit">
<div>1</div><div>2</div><div>3</div><div>/</div>
<div>4</div><div>5</div><div>6</div><div>*</div>
<div>7</div><div>8</div><div>9</div><div>-</div>
<div>0</div><div>C</div><div>=</div><div>+</div>
</div>
</div>

Javascript Code

<script language="javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
$(function(){
	var cal_result=0;
	var resultD="";		
	$("div.iDigit > div").click(function(){
		var pressD=$(this).text();
		var pressID_C=encodeURIComponent(pressD);			
		if(pressD=="C"){
			resultD=0;			
		}else{
			if(cal_result==1){
				resultD=pressD;				
				cal_result=0;	
			}else{
				if($("div.iResult").text()=="0"){
					resultD=pressD;					
				}else{
					resultD+=pressD;						
				}
			}			
		}
		if(pressID_C=="%3D"){
			resultD=eval($("div.iResult").text());
			cal_result=1;
		}
		$("div.iResult").text(resultD);
	});
});
</script>

ตัวอย่าง