電卓アプリのＵＩを少しまともにして、機能不足を少し解消しました。
変更点
小数点の計算も可能になりました。
jQueryでUIをまともにしました。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>でんた君</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script language="JavaScript"><!--
total = 0;
input = "";
cal = 0;
work= new Array("","+","-","*","/")
f = 1;
function Value(Data){
f=0;
input += Data;
document.myForm.myLine.value = input;
}
function C(){
input="";
total=0;
document.myForm.myLine.value = input;
}
function Calc(Data){
if(f == 0){
f = 1;
total = total + work[cal] + input;
total = eval(total);
input = "";
document.myForm.myLine.value = total;
}
if(Data == 5){
total=0;
cal = 0;
}else{
cal = Data;
}
}
//-->
</script>
</head>
<body>
<section data-role="page" id="page01">
<header data-role="header" data-position="fixed" data-theme="b">
<h1> でんた君 </h1>
</header><!-- /header -->
<div data-role="content">
<form name="myForm">
<table>
<tr>
<th><input type="text" data-inline="true" name="myLine" value="計算結果"></th>
<td><input type="button" value="C" data-inline="true" onclick="C()"></td>
<td></td>
</tr>
</table>
<input type="button" value="1" data-inline="true" onclick="Value(1)">
<input type="button" value="2" data-inline="true" onclick="Value(2)">
<input type="button" value="3" data-inline="true" onclick="Value(3)">
<input type="button" value="/" data-inline="true" onclick="Calc(4)">
<br/>
<input type="button" value="4" data-inline="true" onclick="Value(4)">
<input type="button" value="5" data-inline="true" onclick="Value(5)">
<input type="button" value="6" data-inline="true" onclick="Value(6)">
<input type="button" value="*" data-inline="true" onclick="Calc(3)">
<br/>
<input type="button" value="7" data-inline="true" onclick="Value(7)">
<input type="button" value="8" data-inline="true" onclick="Value(8)">
<input type="button" value="9" data-inline="true" onclick="Value(9)">
<input type="button" value="-" data-inline="true" onclick="Calc(2)">
<br/>
<input type="button" value="0" data-inline="true" onclick="Value(0)">
<input type="button" value="." data-inline="true" onclick="Value('.')">
<input type="button" value="=" data-inline="true" onclick="Calc(5)">
<input type="button" value="+" data-inline="true" onclick="Calc(1)">
</form>
</div>
</section>
</body>
</html>
最終更新：2012年04月24日 20:18
