<!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>JavaScript计算器</title>
</head>
<script language="javascript">
var curState;
var curOper;
var num1;
var preOper;
function setStartState()
{
curState ="beStart";
num1=0;
curOper="start";
preOper=false;
}
function addNum(i)
{
if(preOper)//表示在此之前刚刚单击过双边运算符,刚开始第2个数的输入
{
cal.total.value=i;//total为结果文本框
preOper=false;
}
else//表示正在进行或开始一个数字的输入
{
if(cal.total.value=="0")
{
cal.total.value=i;
curState="beInteger";
}
else
cal.total.value+=i;//这里的'+'号为字符串连接符号,total中的值作为一个字符串来处理,通过'+’将多次输入的数字连起来,输入多位数字
}
}
function addPoint()
{
if(curState=="beStart"||curState=="beInteger")
{
cal.total.value+=".";
curState="beFloat";//将当前数值状态设置为float
}
}
function cleartext()//清空计算结果文本框内容
{
cal.total.value="0";
curState="beStart";
curOper="start";
}
function count()//基本的加减乘除运算
{
if(curOper!="start")
{
switch(curOper)//根据CurOper的值确定运算法则
{
case "+":
num1=parseFloat(num1)+parseFloat(cal.total.value);
break;
case "-":
num1=parseFloat(num1)-parseFloat(cal.total.value);
break;
case "*":
num1=parseFloat(num1)*parseFloat(cal.total.value);
break;
case "/":
num1=parseFloat(num1)/parseFloat(cal.total.value);
break;
}
cal.total.value=num1;
preOper=true;
}
curOper="start";
}
function setOper(oper)//当单击”+-*/时,设置记录当前的运算规则
{
preOper==true;//为布尔型,表示在此之前是否刚刚单击过双边运算符
if(curOper="start")
{
num1=0+cal.total.value;//将第一个值用num1保存,采用'0+'把total.value字符串转换为数值型,类似于使用了parseFloat()方法
curOper=oper;
}
else
{
count();//如果前面已经出现一次运算,则再次单击运算规则时,先计算前次运算,再记录当前运算规则
curOper=oper;
}
}
function useFunc(func)
{
switch(func)
{
case "sin"://应用Math对象方法进行运算,Math首字母要大写
cal.total.value=Math.sin(cal.total.value);
preOper=true;
break;
case "cos"://应用Math对象方法进行运算,Math首字母要大写
cal.total.value=Math.cos(cal.total.value);
preOper=true;
break;
case "asin"://应用Math对象方法进行运算,Math首字母要大写
cal.total.value=Math.asin(cal.total.value);
preOper=true;
break;
case "acos"://应用Math对象方法进行运算,Math首字母要大写
cal.total.value=Math.acos(cal.total.value);
preOper=true;
break;
case "tan"://应用Math对象方法进行运算,Math首字母要大写
cal.total.value=Math.tan(cal.total.value);
preOper=true;
break;
case "atan"://应用Math对象方法进行运算,Math首字母要大写
cal.total.value=Math.atan(cal.total.value);
preOper=true;
break;
case "log"://应用Math对象方法进行运算,Math首字母要大写
cal.total.value=Math.log(cal.total.value);
preOper=true;
break;
case "exp"://应用Math对象方法进行运算,Math首字母要大写
cal.total.value=Math.exp(cal.total.value);
preOper=true;
break;
case "sqrt"://应用Math对象方法进行运算,Math首字母要大写
cal.total.value=Math.sqrt(cal.total.value);
preOper=true;
break;
case "1/x"://应用Math对象方法进行运算,Math首字母要大写
cal.total.value=1/cal.total.value;
preOper=true;
break;
}
}
</script>
<body>
<font size=6>JavaScript计算器</font>
<form name="cal">
<table  border="2" align="left">
  <tr align="center">
    <td colspan="6">
<input type="text" name="total" size="40"  value="0" /></td>
  </tr>
  <tr align="center">
    <td>
<input type="button"  value="sin" onclick="useFunc('sin')"/>
</td>
    <td>
<input type="button"  value="cos" onclick="useFunc('cos')"/>
</td>
    <td>
<input type="button" value="1" onclick="addNum('1')" />
</td>
<td>
<input type="button" value="2" onclick="addNum('2')" />
</td>
<td>
<input type="button" value="3" onclick="addNum('3')" />
</td>
<td>
<input type="button" value="+" onclick="setOper('+')" />
</td>
  </tr>
  <tr align="center">
    <td>
<input type="button" value="asin" onclick="useFunc('asin')"/>
</td>
    <td>
<input type="button" value="acos" onclick="useFunc('acos')" />
</td>
    <td>
<input type="button"  value="4" onclick="addNum('4')"/>
</td>
<td>
<input type="button" value="5" onclick="addNum('5')" />
</td>
<td>
<input type="button" value="6" onclick="addNum('6')" />
</td>
<td>
<input type="button"  value="-" onclick="setOper('-')"/>
</td>
  </tr>
  <tr align="center">
    <td>
<input type="button" value="tan" onclick="useFunc('tan')"/>
</td>
    <td>
<input type="button" value="atan" onclick="useFunc ('atan')"/>
</td>
    <td>
<input type="button" value="7" onclick="addNum('7')"  />
</td>
<td>
<input type="button" value="8" onclick="addNum('8')"  />
</td>
<td>
<input type="button" value="9" onclick="addNum('9')" />
</td>
<td>
<input type="button" value="*" onclick="setOper('*')"  />
</td>
  </tr>
  <tr align="center">
    <td>
<input type="button" value="log" onclick="useFunc('log')"/>
</td>
    <td>
<input type="button" value="exp" onclick="useFunc ('exp')"/>
</td>
    <td>
<input type="button" value="0" onclick="addNum('0')"  />
</td>
<td>
<input type="button" value="." onclick="addPoint()"  />
</td>
<td>
<input type="button" value="=" onclick="count()" />
</td>
<td>
<input type="button" value="/" onclick="setOper('/')"  />
</td>
  </tr>
  <tr align="center">
  <td>
<input type="button" value="sqt" onclick="useFunc('sqt')"/>
</td>
    <td>
<input type="button" value="1/x" onclick="useFunc ('1/x')"/>
</td> <td>
<input type="button" value="pi" onclick="cal.total.value=Math.pi"  />
</td>
<td>
<input type="button" value="E" onclick="cal.total.value=Math.E" />
</td>
<td colspan="2">
<input type="button" value="清除" onclick="cleartext()"  />
</td>
  </tr>
</table></body>
</html>

解决方案 »

  1.   

    <!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>JavaScript计算器</title>
    </head>
    <script language="javascript">
    var curState;
    var curOper;
    var num1;
    var preOper;
    function setStartState()
    {
    curState ="beStart";
    num1=0;
    curOper="start";
    preOper=false;
    }
    function addNum(i)
    {
    if(preOper)//表示在此之前刚刚单击过双边运算符,刚开始第2个数的输入
    {
    cal.total.value=i;//total为结果文本框
    preOper=false;
    }
    else//表示正在进行或开始一个数字的输入
    {
    if(cal.total.value=="0")
    {
    cal.total.value=i;
    curState="beInteger";
    }
    else
    cal.total.value+=i;//这里的'+'号为字符串连接符号,total中的值作为一个字符串来处理,通过'+’将多次输入的数字连起来,输入多位数字
    }
    }
    function addPoint()
    {
    if(curState=="beStart"||curState=="beInteger")
    {
    cal.total.value+=".";
    curState="beFloat";//将当前数值状态设置为float
    }
    }
    function cleartext()//清空计算结果文本框内容
    {
    cal.total.value="0";
    curState="beStart";
    curOper="start";
    }
    function count()//基本的加减乘除运算
    {
    if(curOper!="start")
    {
    switch(curOper)//根据CurOper的值确定运算法则
    {
    case "+":
    num1=parseFloat(num1)+parseFloat(cal.total.value);
    break;
    case "-":
    num1=parseFloat(num1)-parseFloat(cal.total.value);
    break;
    case "*":
    num1=parseFloat(num1)*parseFloat(cal.total.value);
    break;
    case "/":
    num1=parseFloat(num1)/parseFloat(cal.total.value);
    break;
    }
    cal.total.value=num1;
    preOper=true;
    }
    curOper="start";
    }
    function setOper(oper)//当单击”+-*/时,设置记录当前的运算规则
    {
    preOper==true;//为布尔型,表示在此之前是否刚刚单击过双边运算符
    if(curOper="start")
    {
    num1=0+cal.total.value;//将第一个值用num1保存,采用'0+'把total.value字符串转换为数值型,类似于使用了parseFloat()方法
    curOper=oper;
    }
    else
    {
    count();//如果前面已经出现一次运算,则再次单击运算规则时,先计算前次运算,再记录当前运算规则
    curOper=oper;
    }
    }
    function useFunc(func)
    {
    switch(func)
    {
    case "sin"://应用Math对象方法进行运算,Math首字母要大写
    cal.total.value=Math.sin(cal.total.value);
    preOper=true;
    break;
    case "cos"://应用Math对象方法进行运算,Math首字母要大写
    cal.total.value=Math.cos(cal.total.value);
    preOper=true;
    break;
    case "asin"://应用Math对象方法进行运算,Math首字母要大写
    cal.total.value=Math.asin(cal.total.value);
    preOper=true;
    break;
    case "acos"://应用Math对象方法进行运算,Math首字母要大写
    cal.total.value=Math.acos(cal.total.value);
    preOper=true;
    break;
    case "tan"://应用Math对象方法进行运算,Math首字母要大写
    cal.total.value=Math.tan(cal.total.value);
    preOper=true;
    break;
    case "atan"://应用Math对象方法进行运算,Math首字母要大写
    cal.total.value=Math.atan(cal.total.value);
    preOper=true;
    break;
    case "log"://应用Math对象方法进行运算,Math首字母要大写
    cal.total.value=Math.log(cal.total.value);
    preOper=true;
    break;
    case "exp"://应用Math对象方法进行运算,Math首字母要大写
    cal.total.value=Math.exp(cal.total.value);
    preOper=true;
    break;
    case "sqrt"://应用Math对象方法进行运算,Math首字母要大写
    cal.total.value=Math.sqrt(cal.total.value);
    preOper=true;
    break;
    case "1/x"://应用Math对象方法进行运算,Math首字母要大写
    cal.total.value=1/cal.total.value;
    preOper=true;
    break;
    }
    }
    </script>
    <body>
    <font size=6>JavaScript计算器</font>
    <form name="cal">
    <table  border="2" align="left">
      <tr align="center">
        <td colspan="6">
    <input type="text" name="total" size="40"  value="0" /></td>
      </tr>
      <tr align="center">
        <td>
    <input type="button"  value="sin" onclick="useFunc('sin')"/>
    </td>
        <td>
    <input type="button"  value="cos" onclick="useFunc('cos')"/>
    </td>
        <td>
    <input type="button" value="1" onclick="addNum('1')" />
    </td>
    <td>
    <input type="button" value="2" onclick="addNum('2')" />
    </td>
    <td>
    <input type="button" value="3" onclick="addNum('3')" />
    </td>
    <td>
    <input type="button" value="+" onclick="setOper('+')" />
    </td>
      </tr>
      <tr align="center">
        <td>
    <input type="button" value="asin" onclick="useFunc('asin')"/>
    </td>
        <td>
    <input type="button" value="acos" onclick="useFunc('acos')" />
    </td>
        <td>
    <input type="button"  value="4" onclick="addNum('4')"/>
    </td>
    <td>
    <input type="button" value="5" onclick="addNum('5')" />
    </td>
    <td>
    <input type="button" value="6" onclick="addNum('6')" />
    </td>
    <td>
    <input type="button"  value="-" onclick="setOper('-')"/>
    </td>
      </tr>
      <tr align="center">
        <td>
    <input type="button" value="tan" onclick="useFunc('tan')"/>
    </td>
        <td>
    <input type="button" value="atan" onclick="useFunc ('atan')"/>
    </td>
        <td>
    <input type="button" value="7" onclick="addNum('7')"  />
    </td>
    <td>
    <input type="button" value="8" onclick="addNum('8')"  />
    </td>
    <td>
    <input type="button" value="9" onclick="addNum('9')" />
    </td>
    <td>
    <input type="button" value="*" onclick="setOper('*')"  />
    </td>
      </tr>
      <tr align="center">
        <td>
    <input type="button" value="log" onclick="useFunc('log')"/>
    </td>
        <td>
    <input type="button" value="exp" onclick="useFunc ('exp')"/>
    </td>
        <td>
    <input type="button" value="0" onclick="addNum('0')"  />
    </td>
    <td>
    <input type="button" value="." onclick="addPoint()"  />
    </td>
    <td>
    <input type="button" value="=" onclick="count()" />
    </td>
    <td>
    <input type="button" value="/" onclick="setOper('/')"  />
    </td>
      </tr>
      <tr align="center">
      <td>
    <input type="button" value="sqt" onclick="useFunc('sqt')"/>
    </td>
        <td>
    <input type="button" value="1/x" onclick="useFunc ('1/x')"/>
    </td> <td>
    <input type="button" value="pi" onclick="cal.total.value=Math.pi"  />
    </td>
    <td>
    <input type="button" value="E" onclick="cal.total.value=Math.E" />
    </td>
    <td colspan="2">
    <input type="button" value="清除" onclick="cleartext()"  />
    </td>
      </tr>
    </table></body>
    </html>
      

  2.   

    点击数字的时候调用的addNum('1'),参数'1'是字符串,在函数中cal.total.value = i; cal.total.value += i; 你都没有转换成数字类型,相当于进行字符串拼接了。
    例如:你要计算1+2,你点击2的时候相当于cal.total.value += '2';
    此时,结果是'1' + '2',不是3,而是'12',改一下吧,用ParseInt就可以的
      

  3.   

    if(curOper!="start")
    {
    switch(curOper)//根据CurOper的值确定运算法则
    {
    case "+":
    num1=parseFloat(num1)+parseFloat(cal.total.value);
    break;
    case "-":
    num1=parseFloat(num1)-parseFloat(cal.total.value);
    break;
    case "*":
    num1=parseFloat(num1)*parseFloat(cal.total.value);
    break;
    case "/":
    num1=parseFloat(num1)/parseFloat(cal.total.value);
    break;
    }
    cal.total.value=num1;
    preOper=true;
    }
    curOper="start";
    }
    这边不是parseFloat
      

  4.   

    if(curOper!="start")
    {
    switch(curOper)//根据CurOper的值确定运算法则
    {
    case "+":
    num1=parseFloat(num1)+parseFloat(cal.total.value);
    break;
    case "-":
    num1=parseFloat(num1)-parseFloat(cal.total.value);
    break;
    case "*":
    num1=parseFloat(num1)*parseFloat(cal.total.value);
    break;
    case "/":
    num1=parseFloat(num1)/parseFloat(cal.total.value);
    break;
    }
    cal.total.value=num1;
    preOper=true;
    }
    curOper="start";
    }这边不是有if(curOper!="start")
    {
    switch(curOper)//根据CurOper的值确定运算法则
    {
    case "+":
    num1=parseFloat(num1)+parseFloat(cal.total.value);
    break;
    case "-":
    num1=parseFloat(num1)-parseFloat(cal.total.value);
    break;
    case "*":
    num1=parseFloat(num1)*parseFloat(cal.total.value);
    break;
    case "/":
    num1=parseFloat(num1)/parseFloat(cal.total.value);
    break;
    }
    cal.total.value=num1;
    preOper=true;
    }
    curOper="start";
    }这边不是PARSEFLOAT么,
      

  5.   


    function addNum()中也需要parseFloat