<style type="text/css">
.mybtn {
width: 50px;
height: 30px;
border: 1px solid #9A9A9A;
background-color: #515151;
color: #9A9A9A;
vertical-align: middle;
position: relative;
cursor: pointer;
}
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#cal_reset").click(function(event) {
event.preventDefault();
$("#cal_content").html("");
var i = 0;
for (i = 0; i <= 9; i++) {
if (i == 0 || (i % 3) == 1) {
$("#cal_content").prepend("<div id='calrow'></div>");
}
$("#cal_content #calrow:first-child").append("<input type='button' class='mybtn' id='number' value='" + i + "'></input>");
}
var oper = "+-*/=";
$("#cal_content").append("<div id='calrow'></div>");
for (i = 0; i < oper.length; i++) {
$("#cal_content #calrow:last-child").append("<input type='button' class='mybtn' id='number' value='" + oper.substr(i, 1) + "'></input>");
}
$("#cal_content").append("<div id='calrow'></div>");
$("#cal_content #calrow:last-child").append("<div id='expr'></div>");
$("#cal_content #calrow").each(function() {
$(this).children().each(function() {
$(this).hide();
});
$(this).hide();
});
$("#cal_content #calrow:first-child").slideDown(200, function() {
$(this).children().first().slideDown(100, function() {
$(this).next("#number").slideDown(100, arguments.callee);
});
$(this).next("#calrow").slideDown(200, arguments.callee);
});
$("#cal_content input[id='number']").click(function(event) {
event.preventDefault();
$(this).animate({ opacity: 0 }, 100, function() {
$(this).animate({ opacity: 1 }, 100);
});
if (this.value == '=') {
$("#expr").text(eval($("#expr").text()));
} else {
$("#expr").text($("#expr").text() + this.value);
}
});
});
$("#cal_reset").click();
});
</script>
<input type='button' id='cal_reset' class='mybtn' value='reset'></input>
<div id="cal_content"></div>
