<!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>
