hbsv,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.screen{
border: 1px solid #8B4513;
width: 120px;
display: inline-block;
border-radius: 2px;
text-align: right;
}
.calculator{
width: 120px;
text-align: center;
}
.calculator input{
width: 20%;
}
</style>
</head>
<body>
<form>
<table class="calculator">
<tr>
<td>
<span class="screen" >0</span>
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="1" />
<input class="button" type="button" value="2" />
<input class="button" type="button" value="3" />
<input class="button" type="button" value="+" />
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="4" />
<input class="button" type="button" value="5" />
<input class="button" type="button" value="6" />
<input class="button" type="button" value="-" />
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="7" />
<input class="button" type="button" value="8" />
<input class="button" type="button" value="9" />
<input class="button" type="button" value="*" />
</td>
</tr>
<tr>
<td>
<input class="button" type="button" value="c" />
<input class="button" type="button" value="0" />
<input class="button" type="button" value="=" />
<input class="button" type="button" value="/" />
</td>
</tr>
</table>
</form>
<script>
window.addEventListener("DOMContentLoaded", function() {
var calculator = document.querySelector(".calculator"),
screen = document.querySelector(".screen");
var methods = {
a: 0,
b: 0,
"+": function() {
return this.a += this.b
},
"-": function() {
return this.a -= this.b
},
"*": function() {
return this.a *= this.b
},
"/": function() {
return this.a /= this.b
},
out: function(a) {
screen.innerHTML = a
},
fix: function(a) {
return (this[a] * 100 | 0) / 100
},
cur: 0,
res: function(a) {
if (a == +a)
if (!this.cur) {
this.a = +(this.a + "" + a);
this.out(this.fix("a"))
}
else {
this.b = +(this.b + "" + a);
this.out(this.fix("a") + this.cur + this.fix("b"))
}
else if (a == "c")
{
this.b = this.a = this.cur = 0;
this.out(0)
}
else if (this.cur) {
if (!this.b && this.cur == "/") {
this.out("err");
return
}
!this.b && this.cur != "*" && (this.b = this.a);
this[this.cur]();
this.out(this.fix("a"));
this.b = 0;
this.cur = a == "=" ? 0 : a
}
else if (a != "=") {
this.out(this.fix("a") + a);
this.cur = a
}
}
};
calculator.addEventListener("click", function(event) {
var cls = event.target.classList;
if (cls && cls.contains("button")) {
val = event.target.value;
methods.res(val)
}
})
});
</script>
</body>
</html>