自己写的一个jquery计算器
<!DOCTYPE html>
<html>
<head>
<title>test</title>
<meta charset="GBK">
<style>
*{
margin:0;
padding:0;
}
.clearfix:after{
content:".";
display:block;
height:0px;
clear:both;
visibility:hidden;
}
* html .clearfix{
height:1%;
}
body{
font-size:12px;
font-family:arial;
text-align:center;
}
#calculator{
margin:0 auto;
width:260px;
height:250px;
background:#efecdc;
border:2px solid #0000ff;
}
#caltitle{
height:30px;
color:#fff;
padding-left:30px;
line-height:30px;
background:#0000ff;
text-align:left;
font-size:16px;
font-weight:700;
}
#calinput{
height:30px;
margin-top:5px;
}
#inputcont{
height:20px;
margin:5px 10px;
width:240px;
text-align:right;
}
#caloperator{
width:240x;
margin:5px 10px;
}
.cancelOp{
width:120px;
float:left;
height:25px;
color:red;
}
.button{
width:48px;
height:30px;
float:left;
color:blue;
margin:2px 0px;
}
#operator{
color:red;
}
</style>
<script src=\'#\'" /script>
<script>
$(document).ready(function(){
var firstNum=0;
var secondNum=0;
var opeFlag="";
//backspace
$("#backspace").live("click",function(){
if($("#inputcont").val()!=""){
$("#inputcont").val($("#inputcont").val().slice(0,-1));
}
});
//clearall input content
$("#clear").live("click",function(){
if($("#inputcont").val()!=""){
$("#inputcont").val("");
}
});
//input number
$("#number").live('click',function(){
var el=$(this);
$("#inputcont").val($("#inputcont").val()+el.val());
});
//input operator
$("#operator").live("click",function(){
var el=$(this);
switch(el.val()){
case "+":
first=parseFloat($("#inputcont").val());
$("#inputcont").val("");
opeFlag="+";
break;
case "-":
first=parseFloat($("#inputcont").val());
$("#inputcont").val("");
opeFlag="-";
break;
case "*":
first=parseFloat($("#inputcont").val());
$("#inputcont").val("");
opeFlag="*";
break;
case "/":
first=parseFloat($("#inputcont").val());
$("#inputcont").val("");
opeFlag="/";
break;
case "sqrt":
first=parseFloat($("#inputcont").val());
$("#inputcont").val(Math.sqrt(first));
break;
case "%":
first=parseFloat($("#inputcont").val());
$("#inputcont").val(first/100);
break;
case "1/x":
first=parseFloat($("#inputcont").val());
if(first==0){
$("#inputcont").val("除数不能为0");
}
$("#inputcont").val(1/first);
break;
case "+/-":
var content=$("#inputcont").val();
if(content.substr(0,1)=="-"){
$("#inputcont").val($("#inputcont").val().slice(1));
}
else{
$("#inputcont").val("-"+$("#inputcont").val());
}
break;
}
});
$("#equal").live("click",function(){
second=parseFloat($("#inputcont").val());
switch(opeFlag){
case "+":
$("#inputcont").val(first+second);
break;
case "-":
$("#inputcont").val(first-second);
break;
case "*":
$("#inputcont").val(first*second);
break;
case "/":
$("#inputcont").val(first/second);
break;
}
});
});
</script>
</head>
<body>
<div id="calculator">
<div id="caltitle">计算器</div>
<div id="calinput">
<input type="text" id="inputcont">
</div>
<div id="caloperator" class="clearfix">
<input type="button" value="BackSpace" id="backspace" class="cancelOp">
<input type="button" value="C" id="clear" class="cancelOp">
<input type="button" value="7" id="number" class="button">
<input type="button" value="8" id="number" class="button">
<input type="button" value="9" id="number" class="button">
<input type="button" value="/" id="operator" class="button">
<input type="button" value="sqrt" id="operator" class="button">
<input type="button" value="4" id="number" class="button">
<input type="button" value="5" id="number" class="button">
<input type="button" value="6" id="number" class="button">
<input type="button" value="*" id="operator" class="button">
<input type="button" value="%" id="operator" class="button">
<input type="button" value="1" id="number" class="button">
<input type="button" value="2" id="number" class="button">
<input type="button" value="3" id="number" class="button">
<input type="button" value="-" id="operator" class="button">
<input type="button" value="1/x" id="operator" class="button">
<input type="button" value="0" id="number" class="button">
<input type="button" value="+/-" id="operator" class="button">
<input type="button" value="." id="number" class="button">
<input type="button" value="+" id="operator" class="button">
<input type="button" value="=" id="equal" class="button">
</div>
</div>
</body>
</html>