<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>计算器</title>
<style type="text/css">
@charset "utf-8";
/**Public Begin**/
/*@font-face { font-family: 'Transponder'; src: url('fonts/transponder.eot'); src: url('fonts/transponder.ttf') format('truetype'), url('fonts/transponder.woff') format('woff'), url('fonts/transponder.svg') format('svg'); font-weight: normal; font-style: normal;}*/
body{color:#000;background-color:#FFF;margin:0 auto;font: .8em MuseoSans100,"Lucida Grande", Tahoma, Verdana, Arial, "微软雅黑","华文细黑", "黑体", "宋体";}
p{margin:0;}
/**Public End **/
#screen{310px;margin:50px auto;/*height:350px;margin:-175px -150px;position: absolute;top: 50%;left: 50%;*/}
#formula{font-family: Menlo,Monaco,Consolas,"Courier New",monospace;text-align: right;white-space: normal;padding: 5px 0;border-bottom: 1px dashed #000;margin: 0 5px;height: 0.8em;}
#result{font-size: 2.1em;text-align: right;padding: 0 5px;/*font-family:Transponder;*/}
.square,.horect,.verect{font-size: 100%;color: #FFF;border: 0;background-color: #0078e7;text-decoration: none;border-radius: 2px;text-align: center;margin: 6px 3px;*margin: 6px 4px;display:inline-block;*float:left;}
.square:hover,.horect:hover,.verect:hover{background-image: linear-gradient(transparent,rgba(0,0,0,.05) 40%,rgba(0,0,0,.1));cursor:pointer}
.square:active,.horect:active,.verect:active{box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset,0 0 6px rgba(0,0,0,.2) inset;}
.square{50px;height:50px;line-height: 50px;}
.horect{110px;*107px;height:50px;line-height: 50px;}
.verect{50px;height: 112px;line-height: 112px;}
#number{180px;/* margin-left: -3px; */}
#operator{60px;margin-left: -4px;}
#other{60px;margin-left: -3px;}
#number,#operator,#other{display:inline-block;*float:left;vertical-align: top;}
#header{margin: 3px;border: 1px solid #129FEA; 282px;box-shadow: inset 0 1px 3px #ddd;border-radius: 4px;padding: 3px;}
#Lbrackets{*margin-left:6px;}
</style>
</head>
<body>
<div id="screen">
<div id="header">
<div id="formula">
<p></p>
</div>
<div id="result">
<p>0</p>
</div>
</div>
<div id="fbutton">
<div id="control">
<div id="backspace" class="square" title="←">←</div>
<div id="cancel" class="square" title="delete">CE</div>
<div id="clear" class="square" title="Esc">C</div>
<div id="Lbrackets" class="square" title="[">(</div>
<div id="Rbrackets" class="square" title="]">)</div>
</div>
<div id="number">
<div id="num1" class="square">1</div>
<div id="num2" class="square">2</div>
<div id="num3" class="square">3</div>
<div id="num4" class="square">4</div>
<div id="num5" class="square">5</div>
<div id="num6" class="square">6</div>
<div id="num7" class="square">7</div>
<div id="num8" class="square">8</div>
<div id="num9" class="square">9</div>
<div id="num0" class="horect">0</div>
<div id="point" class="square">.</div>
</div>
<div id="operator">
<div id="except" class="square">÷</div>
<div id="multiply" class="square">×</div>
<div id="minus" class="square">-</div>
<div id="plus" class="square">+</div>
</div>
<div id="other">
<div id="negative" class="square">±</div>
<div id="surplus" class="square">%</div>
<div id="equal" class="verect">=</div>
</div>
</div>
</div>
<script type="text/javascript">
keyCalc = function(key){
var formula = document.getElementById("formula").getElementsByTagName("p")[0];
var result = document.getElementById("result").getElementsByTagName("p")[0];
var lastfla = formula.innerHTML.charAt(formula.innerHTML.length - 1);
if(formula.innerHTML.indexOf("=") >= 0)
{
formula.innerHTML = "";
if(!isNaN(key) || key == ".") result.innerHTML = "0";
}
if(key == ")")
{
var fma = formula.innerHTML;
if(fma.split("(").length - fma.split(")").length <= 0) return false;
}
if(key == "(")
{
if(formula.innerHTML.length > 0 && formula.innerHTML.charAt(formula.innerHTML.length - 1) == ")" )
formula.innerHTML = "";
}
if(key == "CL")
{
formula.innerHTML = "";
result.innerHTML = "0";
}
else if(key == "CE")
{
result.innerHTML = "0";
}
else if(key == "SQRT")
{
formula.innerHTML = formula.innerHTML + "sqrt(" + result.innerHTML + ")";
result.innerHTML = "0";
}
else if(key == "1/x")
{
if(result.innerHTML != "0") formula.innerHTML = formula.innerHTML + "1/" + result.innerHTML;
result.innerHTML = "0";
}
else if(key == "←")
{
if(result.innerHTML.length > 1) result.innerHTML = result.innerHTML.substr(0, result.innerHTML.length - 1);
else result.innerHTML = "0";
}
else if(key == "=")
{
if(result.innerHTML.length > 0 && result.innerHTML.charAt(result.innerHTML.length - 1) == "." )
result.innerHTML = result.innerHTML.substr(0, result.innerHTML.length - 1);
formula.innerHTML = formula.innerHTML +
((isNaN(lastfla) && lastfla != ")") || formula.innerHTML.length <= 0
? result.innerHTML : "");
try
{
result.innerHTML = eval(formula.innerHTML.replace(/sqrt/, "Math.sqrt"));
}
catch(err)
{
result.innerHTML = "错误的算式!!!";
}
formula.innerHTML = formula.innerHTML + key;
}
else if(key == "±")
{
if(result.innerHTML.charAt(0) != "-" )
result.innerHTML = "-" + result.innerHTML;
else
result.innerHTML = result.innerHTML.substr(1, result.innerHTML.length - 1);
}
else if(key == ".")
{
if(result.innerHTML.indexOf(".") < 0)
result.innerHTML = result.innerHTML + key;
}
else if(key == "(")
{
if(formula.innerHTML == "") result.innerHTML = "0";
formula.innerHTML = formula.innerHTML + key;
}
else if(!isNaN(key))
{
if((key != "0" && parseInt(result.innerHTML) != 0) || (key == 0 && parseInt(result.innerHTML) != 0) || result.innerHTML.indexOf(".") >= 0)
{
result.innerHTML = result.innerHTML + key;
}
else
{
result.innerHTML = key;
}
}
else
{
if(result.innerHTML.length > 0 && result.innerHTML.charAt(result.innerHTML.length - 1) == "." )
result.innerHTML = result.innerHTML.substr(0, result.innerHTML.length - 1);
formula.innerHTML = formula.innerHTML +
((isNaN(lastfla) && lastfla != ")") || formula.innerHTML.length <= 0
? result.innerHTML : "") + key;
result.innerHTML = "0";
}
}
window.onload = function(){
var body = document.getElementsByTagName("html")[0];
var KeyEvent = function(ev){
ev = ev || window.event;
switch(ev.keyCode)
{
case 96:
case 97:
case 98:
case 99:
case 100:
case 101:
case 102:
case 103:
case 104:
case 105: keyCalc(ev.keyCode - 96); break; // 0-9
case 111: keyCalc("/"); break;
case 106: keyCalc("*"); break;
case 109: keyCalc("-"); break;
case 107: keyCalc("+"); break;
case 189: keyCalc("±"); break;
case 110: keyCalc("."); break;
case 187: if(ev.shiftKey == 1) keyCalc("+"); else keyCalc("="); break; // + or =
case 48: if(ev.shiftKey == 1) { keyCalc(")"); break;} // 0 or )
case 49:
case 50:
case 51:
case 52: if(ev.shiftKey == 1) break; // 0-4
case 53: if(ev.shiftKey == 1) { keyCalc("%"); break;} // 5 or %
case 54:
case 55: if(ev.shiftKey == 1) break; // 6-7
case 56: if(ev.shiftKey == 1) { keyCalc("*"); break;} // 8 or *
case 57: if(ev.shiftKey == 1) { keyCalc("("); break;} else keyCalc(ev.keyCode - 48); break; // 9 or (
case 219: keyCalc("("); break; // [
case 221: keyCalc(")"); break; // ]
case 13: keyCalc("="); break; // enter
case 27: keyCalc("CL"); break; // Esc
case 46: keyCalc("CE"); break; // Delete
case 8: keyCalc("←"); return false; // backspace
default: console.log(ev.keyCode);
}
};
if(body.addEventListener != null)
body.addEventListener('keydown', KeyEvent, false);
else
body.attachEvent('onkeydown', KeyEvent);
var ClickEvent = function(ev){
ev = ev || window.event;
var target = ev.target || ev.srcElement;
switch(target.id)
{
case "num0": keyCalc("0"); break;
case "num1": keyCalc("1"); break;
case "num2": keyCalc("2"); break;
case "num3": keyCalc("3"); break;
case "num4": keyCalc("4"); break;
case "num5": keyCalc("5"); break;
case "num6": keyCalc("6"); break;
case "num7": keyCalc("7"); break;
case "num8": keyCalc("8"); break;
case "num9": keyCalc("9"); break;
case "point": keyCalc("."); break;
case "except": keyCalc("/"); break;
case "multiply": keyCalc("*"); break;
case "minus": keyCalc("-"); break;
case "plus": keyCalc("+"); break;
case "negative": keyCalc("±"); break;
case "surplus": keyCalc("%"); break;
case "equal": keyCalc("="); break;
case "backspace": keyCalc("←"); break;
case "cancel": keyCalc("CE"); break;
case "clear": keyCalc("CL"); break;
case "Lbrackets": keyCalc("("); break;
case "Rbrackets": keyCalc(")"); break;
}
};
if(body.addEventListener != null)
body.addEventListener('click', ClickEvent, false);
else
body.attachEvent('onclick', ClickEvent);
}
</script>
</body>
</html>