js-计算器大家看下 - JavaScript论坛

已结贴√ 问题点数：30 回复次数：5

js-计算器大家看下

大家看些这个计算器代码，注释 /* ··*/ 里面的代码不去的话可以计算但是有个小问题就是点击第一次往上面的文本框输入数字的时候出现 “undefined+数字” 比如第一次点击的是数字“1” 就显示“undefined1”吧注释里面的代码加上就不能计算大家看看那里出了问题谢谢···

程序代码：

<style type="text/css">
<!--
.STYLE1 {
    font-size: 12px;
    color: #FF0000;
}
-->
</style>
<script language="javascript">

var expression;
function numAdd(cv){

/*

var num = document.form1.text1.value;
if (cv="+" || cv="-" || cv="*" || cv="/" )
      {
       document.form1.text1.value="";
       }
if (num.charAt(0)="" || num.charAt(0)="+" || num.charAt(0)="-" || num.charAt(0)="*" || num.charAt(0)="/" )
      {
       alert("这样无法计算");
       expression="";
       }


 */
expression+=cv;


document.form1.text1.value=expression;

}

function compute(){
document.form1.text1.value=eval(expression);
expression=document.form1.text1.value;
}

function crt(){
expression="";
document.form1.text1.value="";
}

</script>


<form name="form1">
    <table width="177" height="150" border="1"  align="center" cellpadding="0" style="border:1px solid #9900CC ">
  <tr>
    <td colspan="4"  align="center"> <span class="STYLE1">计算器</span></td>
    </tr>
  <tr>
    <td colspan="4" align="center"><input type="text" name="text1" height="20"  value=""></td>
   </tr>
  <tr>
    <td width="40" align="center">
      <input type="button" name="b1" value=" 1 " onClick="numAdd('1');"></td>
    <td width="40" align="center"> <input type="button" name="b2" value=" 2 " onClick="numAdd('2');"></td>
    <td width="40" align="center"> <input type="button" name="b3" value=" 3 " onClick="numAdd('3');"></td>
    <td width="40" align="center"> <input type="button" name="bb" value=" / " onClick="numAdd('/');"></td>
  </tr>
  <tr>
    <td width="40" align="center"> <input type="button" name="b4" value=" 4 " onClick="numAdd('4');"></td>
    <td width="40" align="center"> <input type="button" name="b5" value=" 5 " onClick="numAdd('5');"></td>
    <td width="40" align="center"> <input type="button" name="b6" value=" 6 " onClick="numAdd('6');"></td>
    <td width="40" align="center"> <input type="button" name="bc" value=" * " onClick="numAdd('*');"></td>
  </tr>
  <tr>
    <td width="40" align="center"> <input type="button" name="b7" value=" 7 " onClick="numAdd('7');"></td>
    <td width="40" align="center"> <input type="button" name="b8" value=" 8 " onClick="numAdd('8');"></td>
    <td width="40" align="center"> <input type="button" name="b9" value=" 9 " onClick="numAdd('9');"></td>
    <td width="40" align="center"> <input type="button" name="bd" value=" - " onClick="numAdd('-');"></td>
  </tr>
  <tr>
    <td width="40" align="center"> <input type="reset" name="be" value=" CE" onClick="crt();"></td>
    <td align="center"><input type="button" name="bo" value=" 0 " onClick="numAdd('0');"></td>
    <td align="center"><input type="button" name="ba" value=" = " onClick="compute();"></td>
    <td width="40" align="center"> <input type="button" name="badd" value=" + " onClick="numAdd('+');"></td>
  </tr>
</table>





</form>

搜索更多相关主题的帖子: 计算器　

第 2 楼

得分:15

1.undifined是因为第一次使用addnum（）的时候expression变量只声明而未赋值。所以expression+=cv;就会变成undifined+输入值，所以可以给全局变量声明的时候赋空值就不会有这个问题。
var expression="";
2.注释掉的代码块里问题比较多：两个if条件里面的判断（==）都写成赋值（=）了；两个if的功能有点重；判断放在addnum里面不如放在计算结果里面；

第 3 楼

得分:15

路过，看到这个代码不是很简洁

第 4 楼

得分:0

程序代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
<META name="GENERATOR" content="IBM Software Development Platform">
<META http-equiv="Content-Style-Type" content="text/css">
<LINK href="theme/Master.css" rel="stylesheet" type="text/css">
<TITLE>test5.html</TITLE>
</HEAD>
<BODY>
<P>Place content here.</P>
<style type="text/css">
<!--
.STYLE1 {
    font-size: 12px;
    color: #FF0000;
}
-->
</style>
<script language="javascript">

var expression="";
function numAdd(cv){

/*

var num = document.form1.text1.value;
if (cv="+" || cv="-" || cv="*" || cv="/" )
      {
       document.form1.text1.value="";
       }
if (num.charAt(0)="" || num.charAt(0)="+" || num.charAt(0)="-" || num.charAt(0)="*" || num.charAt(0)="/" )
      {
       alert("这样无法计算");
       expression="";
       }

*/
var e=expression.length-1;
var d=expression.charAt(e);
if(cv=="0"){if(d=="/"){alert("0不能作除数");return false}}
if(cv=="+"||cv=="*"||cv=="-"||cv=="/"){
if(d=="+"||d=="*"||d=="-"||d=="/"){return false;}
if(expression!=""){expression=eval(expression);}}
expression+=cv;
if(expression=="*"||expression=="/"){expression="";}
document.form1.text1.value=expression;

}

function compute(){
var e=expression.length-1;
var d=expression.charAt(e);
if(d=="+"||d=="*"||d=="-"||d=="/"){return false;}
document.form1.text1.value=eval(expression);
expression=document.form1.text1.value;
}

function crt(){
expression="";
document.form1.text1.value="";
}

</script>


<form name="form1">
    <table width="177" height="150" border="1"  align="center" cellpadding="0" style="border:1px solid #9900CC ">
  <tr>
    <td colspan="4"  align="center"> <span class="STYLE1">计算器</span></td>
    </tr>
  <tr>
    <td colspan="4" align="center"><input type="text" name="text1" height="20"  value=""></td>
   </tr>
  <tr>
    <td width="40" align="center">
      <input type="button" name="b1" value=" 1 " onClick="numAdd('1');"></td>
    <td width="40" align="center"> <input type="button" name="b2" value=" 2 " onClick="numAdd('2');"></td>
    <td width="40" align="center"> <input type="button" name="b3" value=" 3 " onClick="numAdd('3');"></td>
    <td width="40" align="center"> <input type="button" name="bb" value=" / " onClick="numAdd('/');"></td>
  </tr>
  <tr>
    <td width="40" align="center"> <input type="button" name="b4" value=" 4 " onClick="numAdd('4');"></td>
    <td width="40" align="center"> <input type="button" name="b5" value=" 5 " onClick="numAdd('5');"></td>
    <td width="40" align="center"> <input type="button" name="b6" value=" 6 " onClick="numAdd('6');"></td>
    <td width="40" align="center"> <input type="button" name="bc" value=" * " onClick="numAdd('*');"></td>
  </tr>
  <tr>
    <td width="40" align="center"> <input type="button" name="b7" value=" 7 " onClick="numAdd('7');"></td>
    <td width="40" align="center"> <input type="button" name="b8" value=" 8 " onClick="numAdd('8');"></td>
    <td width="40" align="center"> <input type="button" name="b9" value=" 9 " onClick="numAdd('9');"></td>
    <td width="40" align="center"> <input type="button" name="bd" value=" - " onClick="numAdd('-');"></td>
  </tr>
  <tr>
    <td width="40" align="center"> <input type="reset" name="be" value=" CE" onClick="crt();"></td>
    <td align="center"><input type="button" name="bo" value=" 0 " onClick="numAdd('0');"></td>
    <td align="center"><input type="button" name="ba" value=" = " onClick="compute();"></td>
    <td width="40" align="center"> <input type="button" name="badd" value=" + " onClick="numAdd('+');"></td>
  </tr>
</table>





</form>
</BODY>
</HTML>

你的程序蛮不错的，我给你改了一下，不好意思

第 5 楼

得分:0

回复 4楼 gulimeksoft

呵呵这个发了很长时间了谢谢看了你写的很不错收藏了交割朋友吧 QQ：396362666

第 6 楼

得分:0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> 简单计算器</TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script language="JavaScript">

      var m=0;     //是第一操作数

      function SetExp(str){
      if(m==1)   //根据m值判定结果是否为第一操作数
      {   document.Nform.result.value="";
           m=0;
      }
      else(m==0)
      {  document.Nform.result.value+=str;
      }
      }

      function Cal(result){
      var str=document.Nform.result.value;
      document.Nform.result.value=eval(str);
      m=1;
      }
      function Clear(){
      document.Nform.result.value="";
      }

</script>
</HEAD>

<BODY>
<center>
<h2></h2>
<form name=Nform method=get>
<table border="1" bordercolor="#003300">
<tr>
     <td colspan="3">
           <input type=text name="result">
     </td>
</tr>
<tr align="center">
     <td>
           <input type="button" value="1" onClick="SetExp('1')">
    </td>
     <td>
           <input type="button" value="2" onClick="SetExp('2')">
    </td>
     <td>
           <input type="button" value="3" onClick="SetExp('3')">
    </td>
</tr>
<tr align="center">
     <td>
           <input type="button" value="4" onClick="SetExp('4')">
    </td>
     <td>
           <input type="button" value="5" onClick="SetExp('5')">
    </td>
     <td>
           <input type="button" value="6" onClick="SetExp('6')">
    </td>
</tr>
<tr align="center">
     <td>
           <input type="button" value="7" onClick="SetExp('7')">
    </td>
     <td>
           <input type="button" value="8" onClick="SetExp('8')">
    </td>
     <td>
           <input type="button" value="9" onClick="SetExp('9')">
    </td>
</tr>
<tr align="center">
     <td>
           <input type="button" value="0" onClick="SetExp('0')">
    </td>
     <td>
           <input type="button" value="." onClick="SetExp('.')">
    </td>
     <td>
           <input type="button" value="C" onClick="Clear()">
    </td>
</tr>
<tr align="center">
     <td>
           <input type="button" value="+" onClick="SetExp('+')">
    </td>
     <td>
           <input type="button" value="-" onClick="SetExp('-')">
    </td>
     <td>
           <input type="button" value="*" onClick="SetExp('*')">
    </td>
</tr>
<tr align="center">
     <td>
           <input type="button" value="/" onClick="SetExp('/')">
    </td>
     <td colspan="2">
           <input type="button" value="=" onClick="Cal()">
    </td>
    </tr>
</table>
</form>
</center>

</BODY>
</HTML>

小小的天，大大的夢想。