PHP Ionic Angular Phonegap AJAX Javascript CSS MySQL jQuery Forum


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

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

คำสั่ง การ กำหนด รูปแบบ ตัวอย่าง เทคนิค ลูกเล่น การประยุกต์ การใช้งาน เกี่ยวกับ jquery เครื่องคิดเลข css



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
=
+






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






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


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