PHP Ionic Angular HTML5 AJAX Javascript CSS MySQL jQuery Forum


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

18 March 2009 By Ninenik Narkdee
css jquery เครื่องคิดเลข

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ 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>

ตัวอย่าง

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


อย่าลืมกด Like กด Share เป็นกำลังใจ ในการสร้างบทความใหม่ๆ น่ะครับ





Tags:: เครื่องคิดเลข jquery css







URL สำหรับอ้างอิง