利用JS实现WEB前端计算器功能 -

GyFireI

浏览: 5836 次
性别:

最近访客更多访客>>

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

利用JS实现WEB前端计算器功能

博客分类：

HTML开发

这两天通过学习了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">&nbsp;</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功能，需要对已输入字符串的长度进行裁剪，形成新的字符串。

下面是界面效果图: