(1):效果图如下:

先搭建起HTML页面.代码如下:(亲！请耐心的把这段代码看下去哦！)

 
   <!-- calculator:计算器.  -->
(这个html搭建是很标准的模块化，
...
，便于后期维护.)

  <!-- calcu-head:计算器头部--> 
简单的计算器
 
//在头部设置一个h6标签的文字.

  
//设置form表单.以下的搭建都是在from表单下的.
  <!--calcu-screen:计算器屏-->
<!--配置显示窗口，使用onfocus="this.blur();"避免键盘输入-->
 

  <!--calcu-btn:计算器按钮.--->
<!--配置按钮--> 
 
//按钮属性为7,按下时执行command()函数.
    
//按钮属性为，按下时执行del()函数.
     

     //按钮属性为C,按下按钮执行clearscreen()函数.
      
//按钮属性为X号,按下按钮执行times()函数.

      

    //按钮属性为÷号，按下按钮执行divide()函数.    
      
//按钮属性为+号，按下按钮执行plus()函数.
      

    //按钮属性为-号,按下按钮执行minus()函数.      
      
   //按钮属性为”00”,按下按钮执行dzero()函数.
      
   //按钮属性为”.”号,按下按钮执行dot()函数。
      
   //按钮属性为”%”号,按下按钮执行persent()函数。
      
//按钮属性为”=”号,按下按钮执行equal()函数。
 
 
 
 

我们搭建好页面后，在写js代码。（亲，在坚持下哦！）

为了便于亲的理解，我在这里写出几个例子.
Eg1:7+8=.
用户首先按数字按钮7.执行command()函数。

执行command()函数。（显示用户输入的数字.）

function command(num){
var str=String(document.calculator.numScreen.value);
str=(str!="0") ? ((operate==0) ? str : "") : "";
str=str + String(num); //给当前值追加字符
document.calculator.numScreen.value=str; //刷新显示
operate=0; //重置输入状态
quit=0; //重置防止重复按键的标志
}

用户接着按下“+”号键。执行plus()函数。

function plus(){ //加法 
calculate(); //调用计算函数(作用：储存第1个操作数的值.给num.) 
operate=1; //更改运算状态 
calcul=1; //更改计算状态为加 
}

在调用calculate()函数。（储存第1个操作数.）

function calculate(){ 
numshow=Number(document.calculator.numScreen.value); 
if(num!=0 && quit!=1){ //判断前一个运算数是否为零以及防重复按键的状态 
。。。。。。。
。。。。。。。。**因为篇幅有限，此处省略一些代码**。
。。。。。。。。。
quit=1; //避免重复按键 
} 
else{ 
result=numshow; 
} 
numshow=String(result); 
document.calculator.numScreen.value=numshow; 
num=result; //存储当前值 
}

用户接着输入数字“8”。再次调用command()函数。
（显示用户输入的数字“8”）

command()函数代码,同上.//这里为了节省篇幅。请读者凑合下吧。sorry.

用户接着输入“=”号。执行equal()函数。

执行equal()函数，在调用calculate()函数。

function equal(){ 
calculate(); //等于 
operate=1; 
num=0; 
result=0; 
numshow="0"; 
}

执行calculate()函数中的case1...{}语句块。

case 1:result=num+numshow;break; //计算"+" 

返回2数相加的结果。

读者把这个例子看懂的话，对这个代码的逻辑也就理解了。

但是这段程序写的还是有不少bug:(me后期还要继续斧正.)
eg1:（符号的优先级。）7+8*3=
按照代码的逻辑来计算的话，结果为45。
但实际运算结果为31.
eg2:(页面设计的不友好。)如：7+8=
当用户输入“8”时，会覆盖用户输入的7.
eg3:(代码写的太臃肿了,多个函数调用，不够精简.)