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

ngh313479368 2012-07-18 08:55:08

和电脑自带的计算器基本一样，只有加减乘除四个运算，求分析。。。。

...全文

1062 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

Smith_黄俊卿 2012-07-18

打赏
举报

你的逻辑太混乱了，当按一个运算符时并不是执行这个运算，而是执行上一个运算，然后把运算结果作为当前运算的第一个操作数，帮你简单改了下

<!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>

ngh313479368 2012-07-18

打赏
举报

[Quote=引用 1 楼的回复:]
eval 轻松搞定
[/Quote]
这个我还没有学习到呢，刚开始学习。谢谢

ngh313479368 2012-07-18

打赏
举报

[Quote=引用 2 楼的回复:]
(1)先画个页面，把每个数字运算符号放进去；
(2)然后每个数字符号绑定一个事件，这个事件获取数字或者符号的值，放进一个Input框；
(3)点击计算，把Input框的字符串表达式计算，eval("1*2")
(4)还有计算前要对表达式进行校验,不规则的表达式不能计算
[/Quote]

下面是我写的，就是获得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>