javascript做一个简单的网页计算器

(1)先画个页面，把每个数字运算符号放进去；
(2)然后每个数字符号绑定一个事件，这个事件获取数字或者符号的值，放进一个Input框；
(3)点击计算，把Input框的字符串表达式计算，eval("1*2")
(4)还有计算前要对表达式进行校验,不规则的表达式不能计算
下面是我写的，就是获得num1和num2的值这里有问题，麻烦帮我看看
<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
margin:0px auto;
text-align:center;

}
table{background:#999;}
td input{
width:50px;
height:50px;}
input.p{
height:20px; width:150px;
}
</style>
<script language="javascript">
/*全局变量*/
var num1=0;    //第一个数字
var num2=0;   //第二个数字
var result=0;  //显示栏显示的数字
var oper=0;  //运算符号

/*获得数字*/
function getNum(num){
var str=String(from1.resu.value); //获得当前显示数据
//如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
if(str!="0"&&oper==0){
str=str;
}else{
str="";
}
str=str + String(num); //给当前值追加字符
from1.resu.value=str; //刷新显示
}
/*除法运算*/
function division(){
oper=1;
calculate();
}
/*乘法运算*/
function mult(){
oper=2;
calculate();
}
/*减法运算*/
function subd(){
oper=3;
calculate();
}
/*加法运算*/
function sum(){
oper=4;
calculate();
}

/*最终结果的*/
function equal(){
//调用计算方法
calculate();
//简单的清空数值，方便后面的操作
num1=0;
num2=0;
result=0;
}

/*各种运算*/
function calculate(){
if(num1!=0){
num2=parseInt(from1.resu.value);
}else{
num1=parseInt(from1.resu.value);
}
if(num1!=0 ){ //判断前一个运算数是否为零
switch(oper){ //判断要输入状态
case 1:
result=num1+num2;
break;
case 2:
result=num1-num2;
break;
case 3:
result=num1*num2;
break;
case 4:
break;
}
}else{
result=num2;
}
num2=String(result);
from1.resu.value=num2;
num1=result; //存储当前值

}

/*复位*/
function clean(){
from1.resu.value=0;
num1=0;
num2=0;
result=0;
oper="";
}

</script>
</head><body>
<div>
<form id="from1">
<table width="314" height="333" border="1">
     <tr>
         <td colspan="4" >
           <input type="text" name="resu" id="resu" height="8" class="p"/>
              <input type="button" name="button" id="button" value="复位" onclick="clean()" /></td>

        </tr>
        <tr>
         <td><input type="button" name="button7" id="button7" value="7" onclick="getNum(this.value)" /></td>
            <td><input type="button" name="button8" id="button8" value="8" onclick="getNum(this.value)" /></td>
            <td><input type="button" name="button9" id="button9" value="9" onclick="getNum(this.value)" /></td>
            <td><input type="button" name="button10" id="button10" value="/" onclick="division()" /></td>
        </tr>
        <tr>
         <td><input type="button" name="button4" id="button4" value="4"  onclick="getNum(this.value)"/></td>
            <td><input type="button" name="button5" id="button6" value="5" onclick="getNum(this.value)" /></td>
            <td><input type="button" name="button6" id="button6" value="6" onclick="getNum(this.value)" /></td>
            <td><input type="button" name="button11" id="button11" value="*" onclick="mult()" /></td>
        </tr>
        <tr>
         <td><input type="button" name="button1" id="button1" value="1" onclick="getNum(this.value)" /></td>
            <td><input type="button" name="button1" id="button1" value="2" onclick="getNum(this.value)" /></td>
            <td><input type="button" name="button3" id="button3" value="3" onclick="getNum(this.value)" /></td>
            <td><input type="button" name="button12" id="button13" value="-" onclick="subd()" /></td>
        </tr>
        <tr>
         <td><input type="button" name="button0" id="button0" value="0" onclick="getNum(this.value)" /></td>
            <td><input type="button" name="button15" id="button15" value="." onclick="getNum(this.value)"/></td>
            <td><input type="button" name="button16" id="button16" value="=" onclick="equal()" /></td>
            <td><input type="button" name="button17" id="button17" value="+" onclick="sum()" /></td>
        </tr>
    </table>
  </form>
</div>
</body>
</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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
div{
margin:0px auto;
text-align:center;}
table{background:#999;}
td input{
width:50px;
height:50px;}
input.p{
height:20px; width:150px;
}
</style>
<script language="javascript">
/*全局变量*/
var num1=0; //第一个数字
var num2=0; //第二个数字
var result=0; //显示栏显示的数字
var oper=0; //运算符号
/*获得数字*/
function getNum(num){
var str=String(from1.resu.value); //获得当前显示数据
//如果当前值不是"0"，且状态为0，则返回当前值，否则返回空值;
if(str!="0"&&oper==0){
str=str;
}else{
str="";
}
str=str + String(num); //给当前值追加字符
from1.resu.value=str; //刷新显示
}
/*除法运算*/
function division(){
calculate();
num1=parseInt(from1.resu.value);
oper=1;
}
/*乘法运算*/
function mult(){
calculate();
num1=parseInt(from1.resu.value);
oper=2;
}
/*减法运算*/
function subd(){
calculate();
num1=parseInt(from1.resu.value);
oper=3;
}
/*加法运算*/
function sum(){
calculate();
num1=parseInt(from1.resu.value);
oper=4;
}/*最终结果的*/
function equal(){
//调用计算方法
calculate();
//简单的清空数值，方便后面的操作
num1=0;
num2=0;
result=0;
}/*各种运算*/
function calculate(){
num2=parseInt(from1.resu.value);
switch(oper){ //判断要输入状态
case 1:
result=num1/num2;
break;
case 2:
result=num1*num2;
break;
case 3:
result=num1-num2;
break;
case 4:
result=num1+num2;
break;
default:
result = num2;
break;
}
from1.resu.value=result;
num1=result; //存储当前值

}
/*复位*/
function clean(){
from1.resu.value=0;
num1=0;
num2=0;
result=0;
oper="";
}
</script>
</head><body>
<div>
<form id="from1">
<table width="314" height="333" border="1">
  <tr>
  <td colspan="4" >
  <input type="text" name="resu" id="resu" height="8" class="p"/>
  <input type="button" name="button" id="button" value="复位" onclick="clean()" /></td>

  </tr>
  <tr>
  <td><input type="button" name="button7" id="button7" value="7" onclick="getNum(this.value)" /></td>
  <td><input type="button" name="button8" id="button8" value="8" onclick="getNum(this.value)" /></td>
  <td><input type="button" name="button9" id="button9" value="9" onclick="getNum(this.value)" /></td>
  <td><input type="button" name="button10" id="button10" value="/" onclick="division()" /></td>
  </tr>
  <tr>
  <td><input type="button" name="button4" id="button4" value="4" onclick="getNum(this.value)"/></td>
  <td><input type="button" name="button5" id="button6" value="5" onclick="getNum(this.value)" /></td>
  <td><input type="button" name="button6" id="button6" value="6" onclick="getNum(this.value)" /></td>
  <td><input type="button" name="button11" id="button11" value="*" onclick="mult()" /></td>
  </tr>
  <tr>
  <td><input type="button" name="button1" id="button1" value="1" onclick="getNum(this.value)" /></td>
  <td><input type="button" name="button1" id="button1" value="2" onclick="getNum(this.value)" /></td>
  <td><input type="button" name="button3" id="button3" value="3" onclick="getNum(this.value)" /></td>
  <td><input type="button" name="button12" id="button13" value="-" onclick="subd()" /></td>
  </tr>
  <tr>
  <td><input type="button" name="button0" id="button0" value="0" onclick="getNum(this.value)" /></td>
  <td><input type="button" name="button15" id="button15" value="." onclick="getNum(this.value)"/></td>
  <td><input type="button" name="button16" id="button16" value="=" onclick="equal()" /></td>
  <td><input type="button" name="button17" id="button17" value="+" onclick="sum()" /></td>
  </tr>
  </table>
  </form>
</div>
</body>
</html>

调试易

javascript做一个简单的网页计算器

解决方案 »