使用Js实现简略的计算器功能
HTML代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<link href="CSS/Calculator.css" rel="stylesheet" type="text/css" />
<script>
var flag=0;
var first="";
var t="";
function clearresult(){
document.getElementById("result").value="0.";
first="";
document.getElementById("+").disabled=false;
document.getElementById("-").disabled=false;
document.getElementById("*").disabled=false;
document.getElementById("/").disabled=false;
t="";
first="";
flag="";
}
function backspace(){
if(t==""){
return null;
}else{
var m=document.getElementById("result").value;
var m1=m.substring(0,m.length-1);
document.getElementById("result").value=m1;
t=m1;
}
}
function resultNum(){
var second=parseFloat(document.getElementById("result").value);
switch(flag){
case 0:document.getElementById("result").value="0.";
break;
case 1:document.getElementById("result").value=first+second;
break;
case 2:document.getElementById("result").value=first-second;
break;
case 3:document.getElementById("result").value=first*second;
break;
case 4:document.getElementById("result").value=first/second;
break;
case 5:document.getElementById("result").value=first%second;
break;
}
first="";
t=document.getElementById("result").value;
flag=0;
document.getElementById("+").disabled=false;
document.getElementById("-").disabled=false;
document.getElementById("*").disabled=false;
document.getElementById("/").disabled=false;
document.getElementById("%").disabled=false;
}
function getNum(event){
var tt=document.getElementById(event.id).value;
t=t+tt;
document.getElementById("result").value=t;
}
function cal(event){
var sign=document.getElementById(event.id).value;
if(t==""){
return null;
}else{
if(sign=="+"){
flag=1;
}else if(sign=="-"){
flag=2;
}else if(sign=="*"){
flag=3;
}else if(sign=="/"){
flag=4;
}else if(sign=="%"){
flag=5;
}
first=parseFloat(document.getElementById("result").value);
document.getElementById("result").value="";
t="";
document.getElementById("+").disabled=true;
document.getElementById("-").disabled=true;
document.getElementById("*").disabled=true;
document.getElementById("/").disabled=true;
document.getElementById("/").disabled=true;
}
}
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<table width="300" height="250" border="1" background="Images/1.png" align="center">
<tr>
<td height="52" colspan="3"><input name="result" type="text" id="result" value="0." disabled="true"/></td>
<td width="80"><input type="button" value="C" onclick="backspace();" id="C" class="btn"/></td>
<td width="80"><input type="button" value="CE" onclick="clearresult();" id="CE" class="btn"/></td>
</tr>
<tr>
<td width="80"><input type="button" value="1" onclick="getNum(this)" id="1" class="btn"/></td>
<td width="80"><input type="button" value="2" onclick="getNum(this)" id="2" class="btn"/></td>
<td width="80"><input type="button" value="3" onclick="getNum(this)" id="3" class="btn"/></td>
<td width="80" height="80"><input type="button" value="+/-" onclick="cal(this)" id="+/-" class="btn"/></td>
<td width="80" height="80"><input type="button" value="%" onclick="cal(this)" id="%" class="btn"/></td>
</tr>
<tr>
<td width="80"><input type="button" value="4" onclick="getNum(this)" id="4" class="btn"/></td>
<td width="80"><input type="button" value="5" onclick="getNum(this)" id="5" class="btn"/></td>
<td width="80"><input type="button" value="6" onclick="getNum(this)" id="6" class="btn"/></td>
<td width="80" height="80"><input type="button" value="+" onclick="cal(this)" id="+" class="btn"/></td>
<td width="80" height="80"><input type="button" value="-" onclick="cal(this)" id="-" class="btn"/></td>
</tr>
<tr>
<td width="80"><input type="button" value="7" onclick="getNum(this)" id="7" class="btn"/></td>
<td width="80"><input type="button" value="8" onclick="getNum(this)" id="8" class="btn"/></td>
<td width="80"><input type="button" value="9" onclick="getNum(this)" id="9" class="btn"/></td>
<td width="80" height="80"><input type="button" value="*" onclick="cal(this)" id="*" class="btn"/></td>
<td width="80" height="80"><input type="button" value="/" onclick="cal(this)" id="/" class="btn"/></td>
</tr>
<tr >
<td width="80"><input type="button" value="0" onclick="getNum(this)" id="0" class="btn"/></td>
<td width="80"><input type="button" value="." onclick="getNum(this)" id="." class="btn"/></td>
<td width="80"></td>
<td colspan="2" width="80" height="80" align="center"><input type="button" value="=" onclick="resultNum()" id="btn1" name="btn1" /></td>
</tr>
</table>
</form>
</div>
</body>
</html>
Css代码：
@charset "utf-8";
/* CSS Document */
.btn{width:80px;
height:80px;
font-size: 30px;
color:#03F;
opacity:0.6;
}
.btn:hover{background-color:#0F0;}
#btn1{width:100%;
height:100%;
font-size:30px;
opacity:0.6;
}
.btn1:hover{background-color:#0F0;}
#result{width:100%;
height:100%;
font-size:30px;
opacity:0.6;}
#result:hover{background-color:#0F0;}
第一次学习Js一开始就让我们做一个计算器——头疼，经过参考网上各种代码方法，做了一个简单的计算器，仅供交流。