HTML:
<div id="calc">
<h2 class="header">
<a href="javascript:void(0);" class="mini"></a>
<a href="javascript:void(0);" class="close"></a>
</h2>
<div class="wrapper">
<div class="content">
<div class="led">
<p id="first-part"></p>
<p id="result">0</p>
</div>
<div class="btn-panel" id="base-panel">
<a href="javascript:void(0);">←</a>
<a href="javascript:void(0);">CE</a>
<a href="javascript:void(0);">C</a>
<a href="javascript:void(0);">±</a>
<a href="javascript:void(0);">√</a>
<a href="javascript:void(0);">7</a>
<a href="javascript:void(0);">8</a>
<a href="javascript:void(0);">9</a>
<a href="javascript:void(0);">/</a>
<a href="javascript:void(0);">%</a>
<a href="javascript:void(0);">4</a>
<a href="javascript:void(0);">5</a>
<a href="javascript:void(0);">6</a>
<a href="javascript:void(0);">*</a>
<a href="javascript:void(0);">1/x</a>
<a href="javascript:void(0);">1</a>
<a href="javascript:void(0);">2</a>
<a href="javascript:void(0);">3</a>
<a href="javascript:void(0);">-</a>
<a class="cols-2" href="javascript:void(0);">0</a>
<a href="javascript:void(0);">.</a>
<a href="javascript:void(0);">+</a>
<a class="rows-2 abs-lt" href="javascript:void(0);">=</a>
</div>
</div>
</div>
</div>
JavaScript:
var fn = function(id){
return document.getElementById(id);
};
Math.fix = function(n){
return 1 / n;
};
var Util = {
"√" : "sqrt",
"1/x": "fix"
};
(function($){
var result = $("result"), part1 = $("first-part"), calcReady, functionReady;
var sizeChange = function(){
if( result.innerHTML.length <= 12 ){
result.style.fontSize = "22px";
if( !result.innerHTML ){
result.innerHTML = 0;
}
}else{
result.style.fontSize = "18px";
}
};
var toggle = function(){
part1.innerHTML += result.innerHTML.charAt(0) === "-"
?
"(" + result.innerHTML + ")"
:
result.innerHTML;
};
var _switch = function(chr){
//console.log(chr);
switch(chr){
case "←":
//去掉最后一个字符
result.innerHTML = result.innerHTML.substring(0,result.innerHTML.length-1);