利用JS实现WEB前端计算器效能
利用JS实现WEB前端计算器功能
这两天通过学习了JS，按照要求做了个简单的WEB前端计算器。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>计算器</title>
<script>
var init="";
var lastop="";
var num1=0;
var num2=0;
var rs=0;
function display(state){
init+=state;
show(init);
}
function show(str){
document.getElementById("input").value=str;
}
function getOp(op){
lastop=op;
num1=parseFloat(init);
init="";
}
function getResult(){
num2=parseFloat(init);
init="";
rs=cal(num1,num2,lastop);
show(rs);
}
function fan(){
init=String((parseFloat(document.getElementById("input").value)*(-1)));
document.getElementById("input").value=init;
}
function cal(n1,n2,ope){
switch(ope){
case '+': return(n1+n2);break;
case '-': return(n1-n2);break;
case '*': return(n1*n2);break;
case '/': if(n2!=0){ return(n1/n2); break;}
else{ break;}
case '%': return(n1%n2);break;
}
}
function ce(){
var size=init.length;
init=init.substring(0,size-1);
document.getElementById("input").value=init;
}
function clean(){
init="";
lastop="";
num1=0;
num2=0;
rs=0;
document.getElementById("input").value="0.";
}
</script>
</head>
<body >
<h1 align="center" style="font-family:楷体; color:#999999; ">网页计算器</h1>
<form action="" method="post" enctype="multipart/form-data" name="form1" id="form1" >
<table width="669" height="127" border="1" align="center">
<tr>
<td align="center" colspan="3"><label for="input"></label>
<input type="text" name="input" width="200%" id="input" value="0."/></td>
<td align="center"><input type="button" name="C" id="C" value=" C " onclick="clean()"/></td>
<td align="center"><input type="button" name="CE" id="CE" value=" CE " onclick="ce()"/></td>
</tr>
<tr>
<td align="center"><input type="button" name="seven" id="seven" value=" 7 " onclick="display('7')"/></td>
<td align="center"><input type="button" name="eight" id="eight" value=" 8 " onclick="display('8')" /></td>
<td align="center"><input type="button" name="nine" id="nine" value=" 9 " onclick="display('9')" /></td>
<td align="center"><input type="button" name="+/-" id="+/-" value=" +/- " onclick="fan()"/></td>
<td align="center"><input type="button" name="%" id="%" value=" % " onclick="getOp('%')"/></td>
</tr>
<tr>
<td align="center"><input type="button" name="four" id="four" value=" 4 " onclick="display('4')" /></td>
<td align="center"><input type="button" name="five" id="five" value=" 5 " onclick="display('5')" /></td>
<td align="center"><input type="button" name="six" id="six" value=" 6 " onclick="display('6')" /></td>
<td align="center"><input type="button" name="+" id="+" value=" + " onclick="getOp('+')" /></td>
<td align="center" ><input type="button" name="-" id="-" value=" - " onclick="getOp('-')" /></td>
</tr>
<tr>
<td align="center"><input type="button" name="one" id="one" value=" 1 " onclick="display('1')" /></td>
<td align="center"><input type="button" name="two" id="two" value=" 2 " onclick="display('2')" /></td>
<td align="center"><input type="button" name="three" id="three" value=" 3 " onclick="display('3')"/></td>
<td align="center"><input type="button" name="*" id="*" value=" * " onclick="getOp('*')" /></td>
<td align="center"><input type="button" name="/" id="/" value=" / " onclick="getOp('/')" /></td>
</tr>
<tr>
<td align="center"><input type="button" name="zero" id="zero" value=" 0 " onclick="display('0')" /></td>
<td align="center"><input type="button" name="dot" id="dot" value=" . " onclick="display('.')"/></td>
<td align="center"> </td>
<td align="center"><input type="button" name="=" id="=" value=" = " onclick="getResult()" /></td>
<td align="center"><input type="button" name="return" id="return" value=" 返回 " /></td>
</tr>
</table>
</form>
</body>
</html>
个人感觉比较麻烦的就是实现CE功能，需要对已输入字符串的长度进行裁剪，形成新的字符串。
下面是界面效果图: