用JavaScript做一个简易的计算器

发布网友发布时间：2022-04-21 04:33

共4个回答

热心网友时间：2022-04-07 08:15

我刚学javaScript做一计算器，请看看！多多交流！~~``

<html>
<head>
<title>计算器</title>
</head>
<body bgcolor="#33FF99" onload="FKeyPad.ReadOut.focus();FKeyPad.ReadOut.select();">
<FORM name="Keypad" action="">
<TABLE align="center">
<B>
<TABLE align="center" border=3 width=60 height=80 cellpadding=2 cellspacing=5 borderlight="#008080">
<tr align="center">
<td bordercolor="#FF33CC" bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933" colspan=10 align=center>网页计算器</td>
</tr>
<tr align="center">
<td bordercolor="#FF33CC" bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933" colspan=10 align=right><input name="ReadOut" type="Text" onkeypress="CheckOut()" size=40 value="0"
width=100%></td>
</tr>
<tr align="center">
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnsin" type="Button" value=" sin " onclick="useFun ('sin')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btncos" type="Button" value=" cos " onclick="useFun ('cos')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnOne" type="Button" value=" 1 " onclick="NumPressed(1)"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnTwo" type="Button" value=" 2 " onclick="NumPressed(2)"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnThree" type="Button" value=" 3 " onclick="NumPressed(3)"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnPlus" type="Button" value=" + " onclick="Operation('+')"> </td>
</tr>
<tr align="center">
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnasin" type="Button" value=" asin " onclick="useFun ('asin')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnacos" type="Button" value=" acos " onclick="useFun ('acos')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnFour" type="Button" value=" 4 " onclick="NumPressed(4)"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnFive" type="Button" value=" 5 " onclick="NumPressed(5)"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnSix" type="Button" value=" 6 " onclick="NumPressed(6)"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnMinus" type="Button" value=" - " onclick="Operation('-')"></td>
</tr>
<tr align="center">
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btntan" type="Button" value=" tan " onclick="useFun ('tan')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnatan" type="Button" value=" atan " onclick="useFun ('atan')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnSeven" type="Button" value=" 7 " onclick="NumPressed(7)"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnEight" type="Button" value=" 8 " onclick="NumPressed(8)"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnNine" type="Button" value=" 9 " onclick="NumPressed(9)"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnMultiply" type="Button" value=" * " onclick="Operation('*')"></td>
</tr>
<tr align="center">
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnlog" type="Button" value=" log " onclick="useFun ('log')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnexp" type="Button" value=" exp " onclick="useFun ('exp')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnZero" type="Button" value=" 0 " onclick="NumPressed(0)"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnDecimal" type="Button" value=" . " onclick="Decimal()"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnNeg" type="Button" value=" +/- " onclick="Neg()"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnDivide" type="Button" value=" / " onclick="Operation('/')"></td>
</tr>
<tr align="center">
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnsqrt" type="Button" value=" sqrt " onclick="useFun ('sqrt')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnOx" type="Button" value=" 1/x " onclick="useFun ('1/x')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnXt" type="Button" value=" x^2 " onclick="useFun ('x^2')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnXthr" type="Button" value=" x^3 " onclick="useFun ('x^3')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnpi" type="Button" value=" pi " onclick=FKeyPad.ReadOut.value=Math.PI></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnEquals" type="Button" value=" = " onclick="Operation('=')"></td>
</tr>
<tr align="center">
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnDivide" type="Button" value=" N! " onclick="ni ()"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnDivide" type="Button" value=" pow " onclick="Operation('pow')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnDivide" type="Button" value=" E " onclick=FKeyPad.ReadOut.value=Math.E></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnClear" type="Button" value=" C " onclick="Clear()"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnClearEntry" type="Button" value=" CE " onclick="ClearEntry()"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnReturn" type="Button" value="返回" onclick="goReturn()"></td>
</tr>
<tr align="center">
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnmod" type="Button" value=" MOD " onclick="Operation('MOD')"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnDivide" type="Button" value=" INT" onclick=FKeyPad.ReadOut.value=parseInt(FKeyPad.ReadOut.value,10)></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnmod" type="Button" value=" HEX " onclick="hexchange ()"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnmod" type="Button" value=" OCT " onclick="octchange ()"></td>
<td bordercolordark="#cc0066" bordercolor="#FF9966" bordercolorlight="#CC9933"><input name="btnmod" type="Button" value=" BIN " onclick="binchange ()"></td>
</tr>
</TABLE>
</TABLE>
</B>
</FORM>
</CENTER>
<font face="Verdana, Arial, Helvetica" size=2>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>
</body>
</html>

参考资料：javascript

热心网友时间：2022-04-07 09:33

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>无标题页</title>
<script type="text/javascript">
function cc(x)
{
x.result.value=eval(x.expression.value)
}
</script>
<input type="text" name="expression" size="20" id="tt1"/>
<br />
<input type="button" id="b1" value="请单击这里计算表达式" onclick="cc(form1)" disabled="disabled"/>
</head>
<body>
<h2>一个简单的计算器</h2>
<form id="form1" runat="server">
请输入表达式：
<input type="text" name="expression" size="20" id="tt1"/>
<br />
<input type="button" id="b1" value="请单击这里计算表达式" onclick="cc(form1)" disabled="disabled"/>
<br />
表达式的结果是：
<input type="text" name="result" size="10" id="tt2" />
</form>

</body>
</html>

热心网友时间：2022-04-07 11:07

<HTML>
<HEAD>
<TITLE>JavaScript计算器</TITLE>
<style type="text/css">
p {font-size: 12pt}
.red {color: red;width:34}
.redl{color:red;width:51}
.blue {color: blue;width:34}
</style>
<SCRIPT LANGUAGE="JavaScript" src="calculate.js"></script>
</HEAD>
<BODY>
<center>
<form name="calculator">
<table bgcolor="#aaaaaa" width="230">
<tr><td>
<table bgcolor="#cccccc" border="1">
<tr><td>
<table border=0 cellpadding="0">
<tr><td bgcolor="#000080"></td></tr>
<tr><td>
<table width="100%" border="0">
<tr><td colspan="6"><input type="text" readOnly name="answer" style="text-align:right" size="30" maxlength="30" value="0."></td></tr>
<tr><td colspan="6">
<table border="0" cellpadding="0">
<tr><td>
<input type="text" name="mem" size="3" maxlength="3" style="text-align:center" readOnly style="background:menu"> <input type="button" name="backspace" class="redl" value="退格" tok="\b" onClick="this.form.answer.value = oController.addNumber(this.tok);"> <input type="button" name="CE" class="redl" tok="CE" value="CE" onClick="oController.cleanError();this.form.answer.value = oController.doFun(this.tok)"> <input type="button" name="C" class="redl" tok="CE" value="C" onClick="this.form.answer.value = oController.doFun(this.tok)">
</td></tr>
</table>
</td></tr>
<tr><td><input type="button" name="MC" class="red" value=" MC " tok="MC" onClick="this.form.answer.value = oController.doFun(this.tok);this.form.mem.value='';"></td>
<td><input type="button" name="calc7" class="blue" value=" 7 " tok="7" onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="calc8" class="blue" value=" 8 " tok="8" onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="calc9" class="blue" value=" 9 " tok="9" onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="divide" class="red" value=" / " tok="/" onClick="this.form.answer.value = oController.addOper(this.tok)"></td>
<td><input type="button" name="sqrt" class="blue" value="sqrt" tok="sqrt" onClick="this.form.answer.value = oController.doFun(this.tok)"></td></tr>
<tr><td><input type="button" name="MR" class="red" value=" MR " tok="MR" onClick="this.form.answer.value = oController.doFun(this.tok);"></td>
<td><input type="button" name="calc4" class="blue" value=" 4 " tok="4" onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="calc5" class="blue" value=" 5 " tok="5" onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="calc6" class="blue" value=" 6 " tok="6" onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="multiply" class="red" value=" * " tok="*" onClick="this.form.answer.value = oController.addOper(this.tok)"></td>
<td><input type="button" name="percent" class="blue" value=" % " tok="%" onClick="this.form.answer.value = oController.doFun(this.tok)"></td></tr>
<tr><td><input type="button" name="MS" class="red" value=" MS " tok="MS" onClick="this.form.answer.value = oController.doFun(this.tok);this.form.mem.value='M';"></td>
<td><input type="button" name="calc1" class="blue" value=" 1 " tok="1" onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="calc2" class="blue" value=" 2 " tok="2" onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="calc3" class="blue" value=" 3 " tok="3" onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="minus" class="red" value=" - " tok="-" onClick="this.form.answer.value = oController.addOper(this.tok)"></td>
<td><input type="button" name="recip" class="blue" value="1/x " tok="1/x" onClick="this.form.answer.value = oController.doFun(this.tok)"></td></tr>
<tr><td><input type="button" name="Mplus" class="red" value=" M+ " tok="M+" onClick="this.form.answer.value = oController.doFun(this.tok);this.form.mem.value='M';"></td>
<td><input type="button" name="calc0" class="blue" value=" 0 " tok="0" onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="negate" class="blue" value="+/- " tok="+/-" onClick="this.form.answer.value = oController.doFun(this.tok)"></td>
<td><input type="button" name="dot" class="blue" value=" . " tok="." onClick="this.form.answer.value = oController.addNumber(this.tok)"></td>
<td><input type="button" name="plus" class="red" value=" + " tok="+" onClick="this.form.answer.value = oController.addOper(this.tok)"></td>
<td><input type="button" name="equal" class="red" value=" = " tok="=" onClick="this.form.answer.value = oController.addOper(this.tok)"></td>
</tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</td></tr>
</table>
</form>
</center>
</BODY>
</HTML>

calculate.js
(function(){

//这里是定义一个控制器，用来对外开放计算接口和拦截计算中出现的异常
oController = {
addNumber : function(tok){if(errorState()) return errorResult(); else return addNumber(tok)},
addOper : function(tok){if(errorState()) return errorResult(); else return addOper(tok)},
doFun : function(tok){if(errorState()) {return errorResult();} else return doFun(tok)},
cleanError : cleanError
}

//用来保存记忆的变量
var memery = 0;

//这是符号对应的计算规则，这里采用一个闭包的对照表来处理
var opMap = {
"+":function(a,b){return b + a}, //处理加法运算的闭包
"-":function(a,b){return b - a}, //处理减法运算的闭包
"*":function(a,b){return b * a}, //处理乘法运算的闭包
"/":function(a,b){return b / a}, //处理除法运算的闭包
"=":function(a,b){return a}, //处理最终结果
"C":init, //清零
"CE":init, //清零
"sqrt":function(a){return Math.sqrt(a)}, //计算开方
"1/x":function(a){return 1/a}, //计算倒数
"%":function(a){return a/100}, //求余数
"+/-":function(a){return -a}, //正负号
"MS":function(a){memery = a; return a}, //记忆
"M+":function(a){memery += a; return a}, //累加记忆
"MR":function(a){return memery}, //从记忆中读取
"MC":function(a){memery = 0; return a} //清除记忆
}

//用来存储数值、操作符和输入缓存的数据结构
var oMemery = {
numStack : [], //存储数值
operStack : [], //存储字符串
inBuffer : "" //输入显示缓存
}

//检测计算中出现的数字异常，若有，返回给控制器进行处理
function errorState()
{
with(oMemery)
{
var n = numStack[numStack.length - 1];

return n == Infinity || isNaN(n);
}
}
//若出现异常，这个函数提供出现异常时的数值结果（数值堆栈顶的值）
function errorResult()
{
with(oMemery)
{
return formatBuff(numStack[numStack.length - 1]);
}
}
//清除异常并从错误中恢复
function cleanError()
{
with(oMemery)
{
numStack[numStack.length - 1] = 0;
}
}

function init() //初始化
{
with(oMemery)
{
numStack.length = 0; //清空数值堆栈
operStack.length = 0; //清空操作符堆栈
numStack.push(0); //在数值堆栈中推入一个0作为栈顶
inBuffer = ""; //清空输入缓存
return inBuffer; //将清空后的缓存值（实际上是空字符串''）返回
}
}

function doOper() //计算表达式
{
with(oMemery)
{
if(operStack.length) //如果运算符堆栈中有值
{
try
{
//取得栈顶运算符对应的操作方法
var op = opMap[operStack.pop()];
var args = [];

//该方法需要提供几个操作数，可以通过检查op.length得到
for(var i = 0; i < op.length; i++)
{
//从数值堆栈中依次取相应的操作数进行处理
args.push(numStack.pop());
}
//在这里实际进行计算，并把计算结果重新压入堆栈
numStack.push(op.apply(this, args));
}
catch(ex)
{
alert(ex.message);
}
}
return numStack[numStack.length - 1];
}
}

//格式化显示的数值，主要是为了符合计算器的习惯，比如0显示成0.（带小数点）
function formatBuff(buf)
{
if(buf == "")
return "0.";
else{
buf = parseFloat(buf);
return /\./.test(buf) ? buf : buf + ".";
}
}

function addNumber(tok) //输入数值
{
with(oMemery)
{
try
{
var token;
if(tok == "\b") //如果输入的是一个退格
token = inBuffer.slice(0,-1); //那么把缓存中的内容去掉一个
else
token = inBuffer + tok.toString(); //否则接受新输入的数字
//如果数值的第一位是小数点，显示的时候要补一个0
if(token.slice(0,1) == ".") token = 0 + token;
//判断输入接收后的结果是否满足数值的格式
if(/^([\d]+(\.)?[\d]*)?$/.test(token))
{
inBuffer = token; //如果满足，则确认接受，写入缓存
}

return formatBuff(inBuffer);

}
catch(ex)
{
alert(ex.message);
}
}
}

function addOper(tok) //输入运算符
{
with(oMemery)
{
try
{
//如果缓存中有数值，将它推入数值堆栈
if(inBuffer != "")
numStack.push(parseFloat(inBuffer));
//否则从操作符堆栈中将前一个输入的操作符弹出用当前操作符替代
else
operStack.pop();
var ret = doOper(); //计算表达式
operStack.push(tok); //将新输入的运算符推入堆栈
inBuffer = ""; //清空输入缓存
return formatBuff(ret);
}
catch(ex)
{
alert(ex.message);
}
}
}

function doFun(tok) //处理函数
{
with(oMemery)
{
try{
//假如是一些函数如sqrt
var fun = opMap[tok];
//如果输入缓存无内容
if(inBuffer == "")
inBuffer = numStack.pop(); //从数值堆栈中取数
else
operStack.push(tok); //否则将函数推入操作符堆栈

//计算函数调用结果并放入数值堆栈
numStack.push(fun(parseFloat(inBuffer)));

inBuffer = ""; //清空缓存

return formatBuff(numStack[numStack.length - 1]);
}
catch(ex){
alert(ex.message);
}
}
}

init(); //这里执行前面定义的初始化函数
})();

热心网友时间：2022-04-07 12:59

继续做梦吧