HTMl编写计算器

html ,css,javaScript完成的计算器程序：

<html>
<title> 多动能计算器 </title>
<!--
计算器version 4.0
这一版本的计算器：
将所有的操作集合在同一个方法中
使用的方法为无参数的
样式表的使用
-->
<head>
<title> 计算器 </title>
<style>
.numberButton{width:40px;height:40px;color:#0000FF;font-size:36px}
.operatorButton{width:40px;height:40px;color:#FF0000;font-size:36px}
.textButton{width:170;text-align:right;}
</style>
<script language="javascript">
//操作数和操作符是整个程序运行的全局变量所以在方法实现的前面定义
var operatorNumber1;
var operatorNumber2;
var operator;
var result;
//这里实现点击数字和Dot符号按扭等获取事件源
function Click()
{
var control=event.srcElement;
var x=control.value;
//上面是获取事件源，得到事件按钮的值
var s=textResult.value;
//上面是获取当前的文本框的内容
var index=s.indexOf('.');
//在字符串中查看是否已经存在【.】使用内置函数，如果不存在则返回-1；
if(index!=-1 && x==".")//使得小数点之后能够继续输入
{
return ;
}
else if((x=='+')||(x=='-')||(x=='*')||(x=='/'))
{
//实现操作符的功能,当传入函数的字符为操作符的时候执行下面的操作
/*
记录当前的文本框内容为操作数operatorNumber1;
记录点击的操作符按钮operator
清理掉当前的文本框内容
*/
operatorNumber1=textResult.value;
operator=x;
textResult.value="";
}
else if(x=='=')
{
//进行运算操作 operatorNumber2不能为零
//拿到当前文本框中的内容作为operatorNumber2
operatorNumber2=textResult.value;
//得到操作数2后清理掉文本框中的内容；等待显示结果
textResult.value="";
var firstNumber=parseFloat(operatorNumber1);
var secondNumber=parseFloat(operatorNumber2);
if(operator=="+")
{
result=firstNumber+secondNumber;
}
else if(operator=="-")
{
result=firstNumber-secondNumber;
}
else if(operator=="*")
{
result=firstNumber*secondNumber;
}
else if(operator=="/")
{
if(secondNumber==0)
{
alert("除数不能为零！重新开始");
return;
}
result=firstNumber/secondNumber;
}
textResult.value=result;
}
else
{
//将点击的按钮的值输入到文本框中
//注释：在这里遇到一个问题，如果不用else就表示所有的判断完成之后，将必然执行后面的语句
//这样导致的问题是文本框将是一个表达式显然不符合要求，所以数字的输入放在
//else块中（相当于switch中的default）操作
ss=s+x;
textResult.value=s;
}
}
</script>
</head>
<body>
<p style="font-size:xx-large;text-align:center; color:#FF0000; font-family:Arial, Helvetica, sans-serif; font-style:oblique"> 计算器旗舰版 </p>
<div style="text-align:center">
<input type="text" id="textResult" class="textButton" value=""/>
<table>
<tr>
<td>
<input type="button" value="7" class="numberButton" onClick="Click();"/>
<input type="button" value="8" class="numberButton" onClick="Click();"/>
<input type="button" value="9" class="numberButton" onClick="Click();"/>
<input type="button" value="/" class="operatorButton" onClick="Click();"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="4" class="numberButton" onClick="Click();"/>
<input type="button" value="5" class="numberButton" onClick="Click();"/>
<input type="button" value="6" class="numberButton" onClick="Click();"/>
<input type="button" value="*" class="operatorButton" onClick="Click();"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="1" class="numberButton" onClick="Click();"/>
<input type="button" value="2" class="numberButton" onClick="Click();"/>
<input type="button" value="3" class="numberButton" onClick="Click();"/>
<input type="button" value="-" class="operatorButton" onClick="Click();"/>
</td>
</tr>
<tr>
<td>
<input type="button" value="0" class="numberButton" onClick="Click();"/>
<input type="button" value="." class="numberButton" onClick="Click();"/>
<input type="button" value="+" class="operatorButton" onClick="Click();"/>
<input type="button" value="=" class="operatorButton" onClick="Click();"/>
</td>
</tr>
</table>
</div>
</body>
</html>

本文转自 secondriver 51CTO博客，原文链接：http://blog.51cto.com/aiilive/673379，如需转载请自行联系原作者

相关文章：