<pre>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.btn{
width:70px;
height:70px;
font-size:24px;
}
.btn1{
width:146px;
height:70px;
font-size:24px;
color:#e4393c;
}
*{
font-size:20px;
}
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="297" height="270" border="1" style="margin:100px auto;padding:0px;">
<tr>
<td height="52" colspan="4"><input name="result" type="text" id="result" value="" style="width:99%;height:100%;" disabled="true"/></td>
</tr>
<tr>
<td width="75"><input type="button" value="1" onclick="getNum(this)" id="1" class="btn"/></td>
<td width="75"><input type="button" value="2" onclick="getNum(this)" id="2" class="btn"/></td>
<td width="75"><input type="button" value="3" onclick="getNum(this)" id="3" class="btn"/></td>
<td width="75" height="75"><input type="button" value="+" onclick="yunsuan(this)" id="+" class="btn" style="color:#F00;"/></td>
</tr>
<tr>
<td width="75"><input type="button" value="4" onclick="getNum(this)" id="4" class="btn"/></td>
<td width="75"><input type="button" value="5" onclick="getNum(this)" id="5" class="btn"/></td>
<td width="75"><input type="button" value="6" onclick="getNum(this)" id="6" class="btn"/></td>
<td width="75" height="75"><input type="button" value="-" onclick="yunsuan(this)" id="-" class="btn" style="color:#F00;"/></td>
</tr>
<tr>
<td width="75"><input type="button" value="7" onclick="getNum(this)" id="7" class="btn"/></td>
<td width="75"><input type="button" value="8" onclick="getNum(this)" id="8" class="btn"/></td>
<td width="75"><input type="button" value="9" onclick="getNum(this)" id="9" class="btn"/></td>
<td width="75" height="75"><input type="button" value="" onclick="yunsuan(this)" id="" class="btn" style="color:#F00;"/></td>
</tr>
<tr>
<td width="75"><input type="button" value="0" onclick="getNum(this)" id="0" class="btn"/></td>
<td width="75"><input type="button" value="00" onclick="getNum(this)" id="00" class="btn"/></td>
<td width="75"><input type="button" value="." onclick="getNum(this)" id="." class="btn"/></td>
<td width="75" height="75"><input type="button" value="/" onclick="yunsuan(this)" id="/" class="btn" style="color:#F00;"/></td>
</tr>
<tr >
<td width="75"><input type="button" value="back" onclick="backspace()" id="back" class="btn" style="color:#F00;"/></td>
<td width="75" height="75"><input type="button" value="clear" onclick="clearresult()" id="clear" class="btn" style="color:#F00;"/></td>
<td colspan="2" width="75" height="75" style="text-align:center;"><input type="button" value="=" onclick="resultNum()" id="btn1" class="btn1" /></td>
</tr>
</table>
</form>
<script language="javascript">
//运算表达式
var flag=0;
var first=parseFloat("");
//tem是临时变量
var tem="";
function clearresult(){
document.getElementById("result").value="";
first=parseFloat("");
document.getElementById("+").disabled=false;
document.getElementById("-").disabled=false;
document.getElementById("*").disabled=false;
document.getElementById("/").disabled=false;
tem="";
first=parseFloat("");
flag="";
}
//退格函数
function backspace(){
if(tem=="")
{
return null;
}
else
{
var m=document.getElementById("result").value;
var m1=m.substring(0,m.length-1);
document.getElementById("result").value=m1;
tem=m1;
}
}
function resultNum(){
var second=parseFloat(document.getElementById("result").value);
if(flag==0)
{
document.getElementById("result").value="";
}
else if(flag==1)
{
document.getElementById("result").value=first+second;
}
else if(flag==2)
{
document.getElementById("result").value=first-second;
}
else if(flag==3){
document.getElementById("result").value=first*second;
}
else if(flag==4){
document.getElementById("result").value=first/second;
}
first=parseFloat("");
tem=document.getElementById("result").value;
flag=0;
document.getElementById("+");
document.getElementById("-");
document.getElementById("*");
document.getElementById("/");
}
function getNum(event){
var tmp=document.getElementById(event.id).value;
tem=tem+tmp;
document.getElementById("result").value=tem;
}
//函数运算
function yunsuan(event){
var sign=document.getElementById(event.id).value;
if(tem=="")
{
return null;
}
else{
if(sign=="+")
{
flag=1;
}else if(sign=="-")
{
flag=2;
}
else if(sign=="*"){
flag=3;
}
else if(sign=="/"){
flag=4;
}
//用first保存第一个参数值
first=parseFloat(document.getElementById("result").value);
document.getElementById("result").value="";
//临时变量清空
tem="";
document.getElementById("+").disabled=true;
document.getElementById("-").disabled=true;
document.getElementById("*").disabled=true;
document.getElementById("/").disabled=true;
}
}
</script>
</body>
</html>
