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 สำหรับอ้างอิง