<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8/>
<title>Calculator</title>
<style id="jsbin-css">
div, span {
margin: 0;
padding: 0;
font-weight: bold;
font: bold 16px Arial, sans-serif;
-moz-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
body {
background: radial-gradient(circle, #fff, #aaa);
background: -webkit-radial-gradient(circle, #fff, #aaa);
background: -o-radial-gradient(circle, #fff, #aaa);
background: -moz-radial-gradient(circle, #fff, #aaa);
background-size: cover;
}
#calculator {
width: 325px;
height: auto;
margin: 100px auto;
padding: 20px;
background: linear-gradient(#9dd2ea, #8bceec);
background: -o-linear-gradient(#9dd2ea, #8bceec);
background: -webkit-linear-gradient(#9dd2ea, #8bceec);
background: -moz-linear-gradient(#9dd2ea, #8bceec);
border-radius: 5px;
box-shadow: 0 7px 8px #0000ff
}
.keys, .head {
overflow: hidden;
}
.keys span, .clear {
float: left;
width: 66px;
height: 40px;
margin: 0 5px 10px 8px;
text-align: center;
line-height: 40px;
border-radius: 3px;
background: #eee;
box-shadow: 0 5px 1px #999;
cursor: pointer;
transition: all 0.3s ease;
}
.keys span:hover {
background: #87cefa;
box-shadow: 0 5px 1px #1e90ff;
color: #fff;
}
.keys .sign {
background: #fffacd;
}
.clear {
float: left;
background: #ffb6c1;
box-shadow: 0 5px 1px #ff86c1;
}
.clear:hover {
background: #ff96a1;
box-shadow: 0 5px 1px #ff4691;
color: #fff;
}
.show {
width: 213px;
height: 40px;
float: right;
margin: 0 16px 5px 0;
border-radius: 3px;
background: #999;
font-size: 20px;
line-height: 40px;
text-align: right;
padding-right: 10px;
box-shadow: inset 0 4px 5px #333;
}
</style>
</head>
<body>
<div id="calculator">
<div class="head">
<span class="clear">c</span>
<div class="show"></div>
</div>
<div class="keys">
<span>7</span>
<span>8</span>
<span>9</span>
<span class="sign">+</span>
<span>4</span>
<span>5</span>
<span>6</span>
<span class="sign">-</span>
<span>1</span>
<span>2</span>
<span>3</span>
<span class="sign">*</span>
<span>0</span>
<span>.</span>
<span>=</span>
<span class="sign">/</span>
</div>
</div>
<script>
window.onload = function () {
var oShow = getByClass("calculator", "show")[0];
var aNum = document.getElementById("calculator").getElementsByTagName("span");
for (var i = 0, iLen = aNum.length; i < iLen; i++) {
aNum[i].onclick = function () {
var oShowVal = oShow.innerHTML;
var oNumVal = this.innerHTML;
var num1, num2 = null;
num1 = oShowVal;
if (oNumVal == "c") {
oShow.innerHTML = "";
}
else if (oNumVal == "=") {
var oResult = eval(oShowVal);
console.log(oResult);
oShow.innerHTML = oResult==undefined?'0':oResult;
}
else {
oShow.innerHTML += oNumVal;
}
}
}
};
function getByClass(root, sClass) {
var obj = document.getElementById(root);
var arr = [];
var aItems = obj.getElementsByTagName("*");
for (var i = 0; i < aItems.length; i++) {
if (aItems[i].className == sClass) {
arr.push(aItems[i]);
}
}
return arr;
}
</script>
</body>
</html>
