网页版计算器
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=gb2312" />
<title>计算器</title>
<link type="text/css" rel="stylesheet" href="index.css" />
<script type="text/javascript" language="javascript">
<!--
var Pd = new Boolean();
//获取点击按钮后，按钮上的信息
function getButtonValue(eve){
var textValue = document.getElementById("textId");
if(Pd){
if(textValue.value!="+"||textValue.value!="-"||textValue.value!="*"||textValue.value!="/"){
textValue.value = "";
textValue.value += eve.value;
Pd = false;
}else{
textValue.value += eve.value;
}
}else{
textValue.value += eve.value;
}
}
//点击计算按钮后对串进行求值
function addStr(){
var strAdd = "";//把串进行组合
var textValue = document.getElementById("textId");
strAdd = textValue.value;
textValue.value = sumStr(textValue.value);
strAdd += "="+textValue.value;
saveHistory(strAdd);
Pd = true;
}
//对批处理进行处理
function batchStr(){
var strAdd = document.getElementById("textareaLeftId").value;
var strGroup = "";//把串进行组合
var strSum = "";//接收返回结果
while(strAdd.lastIndexOf("\r\n")!=-1){
var subString = strAdd;
subString = strAdd.substring(0,strAdd.indexOf("\r\n"));
strAdd = strAdd.substring(strAdd.indexOf("\r\n")+1);
strGroup = subString;
strSum = sumStr(subString);
strGroup +="="+strSum;
saveHistory(strGroup);
}
}
//进行倒数运算
function daoAdd(eve){
var strSave = "";
var str = document.getElementById("textId");
strSave = str.value+"倒数";
str.value = 1/parseFloat(str.value);
saveHistory(strSave+str.value);
}
//进行开方运算
function doSqrt(eve){
var strSave = "";
var str = document.getElementById("textId");
strSave = str.value+"开方";
str.value = Math.sqrt(parseFloat(str.value));
saveHistory(strSave + str.value);
}
//进行立方运算
function doPing(eve){
var strSave = "";
var str = document.getElementById("textId");
strSave = str.value+"立方";
str.value = parseFloat(str.value)*parseFloat(str.value)*parseFloat(str.value);
saveHistory(strSave + str.value);
}
//进行混合运算（嵌套递归）
function sumStr(str){
//判读加号
if(str.indexOf("+")>=0){
var str1= str.substring(0,str.lastIndexOf("+"));
var str2= str.substring(str.lastIndexOf("+")+1);
if(str1.indexOf("+")>0 ||str1.indexOf("-")>0 ||str1.indexOf("*")>0 ||str1.indexOf("/")>0){
str1=sumStr(str1);
}
if(str2.indexOf("+")>0 ||str2.indexOf("-")>0 ||str2.indexOf("*")>0 ||str2.indexOf("/")>0){
str2=sumStr(str2);
}
return ""+(parseFloat(str1)+parseFloat(str2));
}
//判读减号
if(str.indexOf("-")>=0){
var str1= str.substring(0,str.lastIndexOf("-"));
var str2= str.substring(str.lastIndexOf("-")+1);
if(str1.indexOf("+")>0 ||str1.indexOf("-")>0 ||str1.indexOf("*")>0 ||str1.indexOf("/")>0){
str1=sumStr(str1);
}
if(str2.indexOf("+")>0 ||str2.indexOf("-")>0 ||str2.indexOf("*")>0 ||str2.indexOf("/")>0){
str2=sumStr(str2);
}
return ""+(parseFloat(str1)-parseFloat(str2));
}
//判读乘号
if(str.indexOf("*")>=0){
var str1= str.substring(0,str.lastIndexOf("*"));
var str2= str.substring(str.lastIndexOf("*")+1);
if(str1.indexOf("+")>0 ||str1.indexOf("-")>0 ||str1.indexOf("*")>0 ||str1.indexOf("/")>0){
str1=sumStr(str1);
}
if(str2.indexOf("+")>0 ||str2.indexOf("-")>0 ||str2.indexOf("*")>0 ||str2.indexOf("/")>0){
str2=sumStr(str2);
}
return ""+(parseFloat(str1)*parseFloat(str2));
}
//判断除号
if(str.indexOf("/")>=0){
var str1= str.substring(0,str.lastIndexOf("/"));
var str2= str.substring(str.lastIndexOf("/")+1);
if(str1.indexOf("+")>0 ||str1.indexOf("-")>0 ||str1.indexOf("*")>0 ||str1.indexOf("/")>0){
str1=sumStr(str1);
}
if(str2.indexOf("+")>0 ||str2.indexOf("-")>0 ||str2.indexOf("*")>0 ||str2.indexOf("/")>0){
str2=sumStr(str2);
}
return ""+(parseFloat(str1)/parseFloat(str2));
}
//最后把结果返回
return str;
}
//把计算结果保存历史
function saveHistory(str){
var saveStr = document.getElementById("textareaRightId");
saveStr.value +=str+"\r\n";
saveStr.value +="----------";
}
//清空历史
function deletHistory(){
var saveStr = document.getElementById("textareaRightId");
saveStr.value ="";
}
//批清除
function deletBatch(){
var saveStr = document.getElementById("textareaLeftId");
saveStr.value ="";
}
//清屏
function deletText(){
var textValue = document.getElementById("textId");
textValue.value ="";
}
//退格
function deletLast(){
var textValue = document.getElementById("textId");
textValue.value =textValue.value.substring(0,textValue.value.length - 1);
}
//帮助
function helpUser(){
window.alert("本计算机和普通计算器最大的区别在于，可以进行批处理计算。你可以把您要算的式子放到批处理下，之后点批处理就可以了！\r\n式子格式"+
"1+2*3之后回车输入下一个式子。现在点击确定之后，点击批处理试试吧！记得回车哦！(另外本计算器下没有显示的计算符号一律不支持计算！)");
var saveStr = document.getElementById("textareaLeftId");
saveStr.value ="1+2*3\r\n2+3*6-8\r\n2+6+9+8+5\r\n";
}
//作者介绍
function author(){
window.alert("作者很低调，木有介绍！");
}
//-->
</script>
</head>
<body>
<div class="divFace">
<div class="inFaceTop">
<img src="top.png" />
</div>
<div class="inFaceLeft">
<textarea class="textareaFace" id="textareaLeftId"> </textarea>
</div>
<div class="counterFace">
<table background="计算器背景 拷贝.jpg">
<tr align="center"><td colspan="5"><input type="text" class="textFace" id="textId" maxlength="20" disabled="false"/></td></tr>
<tr align="center">
<td><input type="button" value="批处理" οnclick="batchStr()"/></td>
<td><input type="button" value="批清除" οnclick="deletBatch()"/></td>
<td><input type="button" value="清历史" οnclick="deletHistory()"/></td>
<td><input type="button" value="清屏" οnclick="deletText()"/></td>
<td><input type="button" value="退格" οnclick="deletLast()"/></td>
</tr>
<tr align="center">
<td><input type="button" value="7" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="8" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="9" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="/" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="1/x" οnclick="daoAdd(this)"/></td>
</tr>
<tr align="center">
<td><input type="button" value="4" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="5" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="6" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="*" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="n3" οnclick="doPing(this)"/></td>
</tr>
<tr align="center">
<td><input type="button" value="1" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="2" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="3" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="-" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="√" οnclick="doSqrt(this)"/></td>
</tr>
<tr align="center">
<td><input type="button" value="0" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="00" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="." οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="+" οnclick="getButtonValue(this)"/></td>
<td><input type="button" value="=" οnclick="addStr()"/></td>
</tr>
</table>
</div>
<div class="inFaceRight">
<textarea class="textareaFace" id="textareaRightId"></textarea>
</div>
</div>
<div class="helpRight">
<table>
<tr><td><input type="button" value="帮助" οnclick="helpUser()"/></td></tr>
<tr><td><input type="button" value="作者" οnclick="author()"/></td></tr>
</table>
</div>
</body>
</html>
css
/* CSS Document */
*{
margin-top:0px;
}
body{
background-image:url(12b0000O230-16050[1].jpg);
}
/*整个页面的布局*/
.divFace{
width:800px;
height:437px;
margin:0 auto;
margin-top:50px;
position:absolute;
margin-left:300px;
}
/*div里面的top布局*/
.inFaceTop{
width:800px;
height:100px;
/*border-bottom:1px #333333 solid;*/
}
/*计算器的布局*/
.counterFace{
width:500px;
border-top:0px;
border-bottom:0px;
margin:0 auto;
float:left;
}
.counterFace table{
width:495px;
height:337px;
margin-left:5px;
/*border-bottom:1px #333333 solid;*/
}
/*显示框属性控制*/
.textFace{
width:470px;
height:50px;
margin:0 auto;
margin-top:0px;
font-size:45px;
background:transparent;
}
/*用于计算器左面区域，用于显示历史计算过程*/
.inFaceLeft{
width:148px;
height:334px;
float:left;
}
/*在div表情中加入一个文本框，用于显示历史数据*/
.textareaFace{
width:148px;
height:330px;
font-size:20px;
background:transparent;
background:url(left.jpg);
font-family:"楷体_GB2312";
font-size:24px;
}
.inFaceRight{
width:148px;
height:334px;
float:right;
margin-left:647px;
position:absolute;
}
input{
width:80px;
height:50px;
font-size:18px;
font-family:"宋体";
font-style:inherit;
border:1px solid #FFFFFF;
}
/*靠在右面的，用于写帮助信息的*/
.helpRight{
position:absolute;
margin-top:50px;
}
图片
文章来源: bugstack.blog.csdn.net，作者：小傅哥，版权归原作者所有，如需转载，请联系作者。
原文链接：bugstack.blog.csdn.net/article/details/7766895
- 点赞
- 收藏
- 关注作者
评论（0）