SOURCE

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);
				sizeChange();
				break;
			case "CE": 
				result.innerHTML = "0";
				calcReady = false;
				break;
			case "C": 
				result.innerHTML = "0";
				part1.innerHTML = "";
				calcReady = false;
				break;
			case "±": 
				//正负号切换
				result.innerHTML = result.innerHTML.charAt(0) === '-' 
					? 
					result.innerHTML.substring(1,result.innerHTML.length)
					:
					"-" + result.innerHTML
				break;
			case "√": 
			case "1/x": 
				functionReady || toggle();
				part1.innerHTML = Util[chr] + "(" + part1.innerHTML + ")";
				result.innerHTML = eval("with(Math){("+part1.innerHTML+")}");
				sizeChange();
				calcReady = true;
				functionReady = true;
				break;

			case "/": 
			case "*": 
			case "-": 
			case "+": 
			case "%": 
				if( calcReady ){	//如果表达式部分以符号结尾
					part1.innerHTML =  !part1.innerHTML.split(/[+-\\*\\/]+/).pop()
						?
						part1.innerHTML.substring(0,part1.innerHTML.length-1) + chr
						:
						part1.innerHTML + chr;
				}else{		//否则，要先追加数字进行计算并获得结果，然后追加符号
					toggle();
					result.innerHTML = eval("with(Math){("+part1.innerHTML+")}");
					sizeChange();
					part1.innerHTML += chr;
					calcReady = true;
				}
				functionReady = false;
				break;

			case ".": 
				if( calcReady ){
					result.innerHTML = "0";
					calcReady = false;
				}

				if(result.innerHTML.length < 18 && result.innerHTML.indexOf(".") == -1 ){
					result.innerHTML += chr;
				}
				break;
			case "=": 
				toggle();
				result.innerHTML = eval("with(Math){("+part1.innerHTML+")}");
				part1.innerHTML = "";
				sizeChange();
				break;
			default: //数字
				if( calcReady ){
					result.innerHTML = "0";
					calcReady = false;
				}
				if( functionReady ){
					part1.innerHTML = "";
				}


				if(result.innerHTML.length < 18){
					result.innerHTML = result.innerHTML == "0" ? chr : result.innerHTML+chr;
				}
				sizeChange();
		}
	};

	
	//代理： 对父级标签绑定事件，产生自己标签的作用。
	$("base-panel").onclick = function(e){
		var evt = e || window.event; //w3c event && IE event
		var target = evt.target || evt.srcElement; //w3c target && IE target
		
		if( target.tagName.toUpperCase() === "A" ){
			_switch(target.innerHTML);
		}

	};

	

})(fn);

/*
var fn = function(jq){
	alert(jq);	
};

fn(jQuery);
*/


(function($){
	if(!$)return;
	$(".header .mini").on("click",function(){
		$("#calc").animate({
			height: 28,
			left:114,
			bottom:160
		},500,"swing",function(){
			$(".header").one("mouseover",function(){
				$("#calc").animate({
					height:322,
					left: "50%",
					bottom: "50%"
				});
			});
		});
	});

	$(".header .close").on("click",function(){
		$("#calc").addClass("rotate");
		setTimeout(function(){$("#calc").remove();},1000);
	});

		

})(jQuery);

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

* {
  margin: 0;
  padding: 0;
  border: 0;
}
#calc {
  width: 228px;
  height: 322px;
  position: fixed;
  _position: absolute;
  left: 50%;
  margin-left: -114px;
  bottom: 50%;
  margin-bottom: -160px;
  overflow: hidden;
	zoom:1;
}
#calc .header {
  height: 28px;
  line-height: 28px;
  background: url(http://sandbox.runjs.cn/uploads/rs/296/iehoqtsc/head.gif) no-repeat left top;
  position: relative;
}
#calc .header a {
  display: block;
  position: absolute;
  width: 32px;
  height: 20px;
  overflow: hidden;
  top: 8px;
}
#calc .header a:hover {
  background-image: url(http://sandbox.runjs.cn/uploads/rs/296/iehoqtsc/head.gif);
}
#calc .header .mini {
  left: 120px;
  background-position: -120px -36px;
}
#calc .header .close {
  left: 187px;
  background-position: -187px -36px;
}
#calc .wrapper {
  border: 1px solid #000;
  border-top: 0;
  height: 234px;
  padding: 20px 5px 5px;
  background: #b7cfe8;
}
#calc .wrapper .content {
  background-color: #d9e4f1;
  height: 228px;
  padding-top: 8px;
}
#calc .wrapper .content .led {
  width: 190px;
  height: 46px;
  padding: 4px 2px 0 0;
  margin: 0 auto;
  border: 1px solid #999;
  background-color: #fff;
  background-image: -webkit-linear-gradient(top, #e6effb, #ffffff);
  background-image: -ms-linear-gradient(top, #e6effb, #ffffff);
  background-image: -moz-linear-gradient(top, #e6effb, #ffffff);
  background-image: -o-linear-gradient(top, #e6effb, #ffffff);
  border-radius: 2px;
  text-align: right;
  overflow: hidden;
}
#calc .wrapper .content .led #first-part {
  font: normal 12px/20px Consolas;
  word-spacing: .4em;
  width: 100%;
  overflow: hidden;
  height: 20px;
  float: right;
}
#calc .wrapper .content .led #result {
  float: right;
  font: normal 22px/20px Consolas;
}
#calc .wrapper .content .btn-panel {
  padding-left: 5px;
  _padding-left: 0px;
  position: relative;
  overflow: hidden;
}
#calc .wrapper .content .btn-panel a {
  display: block;
  width: 32px;
  height: 25px;
  border: 1px solid #999;
  float: left;
  text-align: center;
  font: normal 12px/26px Arial;
  margin: 6px 0 0 6px;
  text-decoration: none;
  color: #000;
  border-radius: 2px;
  background-color: #abcdef;
  background-image: -webkit-linear-gradient(top, #f6fafe 0%, #e4eaf3 50%, #d5e3ed 50%, #d7e3ef 100%);
  background-image: -ms-linear-gradient(top, #f6fafe 0%, #e4eaf3 50%, #d5e3ed 50%, #d7e3ef 100%);
  background-image: -moz-linear-gradient(top, #f6fafe 0%, #e4eaf3 50%, #d5e3ed 50%, #d7e3ef 100%);
  background-image: -o-linear-gradient(top, #f6fafe 0%, #e4eaf3 50%, #d5e3ed 50%, #d7e3ef 100%);
}
#calc .wrapper .content .btn-panel a:hover {
  border: 1px solid #ffdb00;
  background-color: #ffd06d;
  background-image: -webkit-linear-gradient(top, #fff4e9 0%, #ffe3c6 50%, #ffd06d 50%, #fff297 100%);
  background-image: -ms-linear-gradient(top, #fff4e9 0%, #ffe3c6 50%, #ffd06d 50%, #fff297 100%);
  background-image: -moz-linear-gradient(top, #fff4e9 0%, #ffe3c6 50%, #ffd06d 50%, #fff297 100%);
  background-image: -o-linear-gradient(top, #fff4e9 0%, #ffe3c6 50%, #ffd06d 50%, #fff297 100%);
}
#calc .wrapper .content .btn-panel .cols-2 {
  width: 72px;
}
#calc .wrapper .content .btn-panel .rows-2 {
  height: 58px;
  line-height: 58px;
}
#calc .wrapper .content .btn-panel .abs-lt {
  clear: both;
  position: absolute;
  left: 165px;
  top: 99px;
  _left: 0;
  _top: -34px;
  _height: 27px;
}
@-webkit-keyframes rotate {
  0% {
    -webkit-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -webkit-transform: rotate(360deg);
    opacity: 0;
  }
}
@-moz-keyframes rotate {
  0% {
    -moz-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -moz-transform: rotate(360deg);
    opacity: 0;
  }
}
@-o-keyframes rotate {
  0% {
    -o-transform: rotate(0);
    opacity: 1;
  }
  100% {
    -o-transform: rotate(360deg);
    opacity: 0;
  }
}
@keyframes rotate {
  0% {
    transform: rotate(0);
    opacity: 1;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0;
  }
}
.rotate {
  -webkit-animation-duration: 1s;
  -moz-animation-duration: 1s;
  -o-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-name: rotate;
  -moz-animation-name: rotate;
  -o-animation-name: rotate;
  animation-name: rotate;
}