<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>网页版计算器</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function() {
var allBtn = new Array(
new Array("C", "±", "<", "+"),
new Array("7", "8", "9", "-"),
new Array("4", "5", "6", "*"),
new Array("1", "2", "3", "/"),
new Array(".", "0", "=", "%")
);
var $tr = $("#calc tr");
for(var i = 0; i < allBtn.length; i++) {
var newTr = $("<tr></tr>");
for(var j = 0; j < allBtn[i].length; j++) {
var newTd = $("<td></td>");
newTd.append('<input type="button" class="btn" value="' + allBtn[i][j] + '" />');
newTr.append(newTd);
}
$("#calc").append(newTr);
}
console.debug($("#calc tr").length);
//给所有的按钮添加事件
$(".btn").click(function() {
var btnVal = $(this).val(); //所按的按钮的值
// console.debug(btnVal);
switch(btnVal) {
case "C":
$("#display").val("0");
break;
case "±":
var tmp = $("#display").val();
if(tmp > 0) {
$("#display").val("-" + tmp);
} else {
$("#display").val(tmp.substring(1, tmp.length));
}
break;
case "<":
var tmp = $("#display").val();
$("#display").val(tmp.substring(0, tmp.length - 1));
break;
case "=":
var result = eval($("#display").val());
$("#display").val(result.toFixed(2));
break;
case "+":
case "-":
case "*":
case "/":
case "%":
var txtVal = $("#display").val();
if(isNaN(txtVal.charAt(txtVal.length - 1))) { //是符号
txtVal = txtVal.substring(0, txtVal.length - 1);
}
txtVal += btnVal;
$("#display").val(txtVal);
break;
case ".":
var txtVal = $("#display").val();
if(txtVal.indexOf(".") == -1) {
txtVal += btnVal;
$("#display").val(txtVal);
} else {
var flag = false; //符号是否存在
var pos = 0;
var posPoint = 0;
pos = txtVal.lastIndexOf("+");
posPoint = txtVal.lastIndexOf(".");
if(pos > 0) { //存在
if(pos > posPoint) {
flag = flag || true;
}
}
pos = txtVal.lastIndexOf("-");
posPoint = txtVal.lastIndexOf(".");
if(pos > 0) { //存在
if(pos > posPoint) {
flag = flag || true;
}
}
pos = txtVal.lastIndexOf("*");
posPoint = txtVal.lastIndexOf(".");
if(pos > 0) { //存在
if(pos > posPoint) {
flag = flag || true;
}
}
pos = txtVal.lastIndexOf("/");
posPoint = txtVal.lastIndexOf(".");
if(pos > 0) { //存在
if(pos > posPoint) {
flag = flag || true;
}
}
pos = txtVal.lastIndexOf("%");
posPoint = txtVal.lastIndexOf(".");
if(pos > 0) { //存在
if(pos > posPoint) {
flag = flag || true;
}
}
console.debug("符号存在？" + flag);
if(flag) {
txtVal += btnVal;
$("#display").val(txtVal);
}
}
break;
default:
var txtVal = $("#display").val(); //当前显示器的值
if(txtVal == "0") {
switch(btnVal) {
case "0":
break;
default:
txtVal = "";
txtVal += btnVal;
$("#display").val(txtVal);
break;
}
} else {
txtVal += btnVal;
$("#display").val(txtVal);
}
break;
}
});
});
</script>
<style type="text/css">
#display,
.btn {
font-family: "Consolas";
font-weight: bold;
}
#display {
font-size: 30px;
text-align: right;
260px;
height: 48px;
padding: 0px 10px;
background: lightgrey;
}
.btn {
font-size: 24px;
text-align: center;
70px;
height: 50px;
margin: auto;
background: lightgrey;
}
</style>
</head>
<body>
<div style="border: 1px solid black; 289px;margin: auto;background: lightgray;">
<table id="calc" border="0" cellpadding="0" cellspacing="1" style="padding: 2px;">
<h2 style="text-align: center;">计算器</h2>
<tr>
<td colspan="4">
<input type="text" id="display" value="0" readonly="readonly" />
</td>
</tr>
</table>
</div>
</body>
</html>
