概念

比如说一个按键命令解析程序，就可以被看做状态机：本来在A状态下，触发一个按键后切换到了B状态；再触发另一个键后切换到C状态，或者返回到A状态。这就是最简单的按键状态机例子。

要素

状态机可归纳为4个要素，即现态、条件、动作、次态。这样的归纳，主要是出于对状态机的内在因果关系的考虑。“现态”和“条件”是因，“动作”和“次态”是果。详解如下：

①现态：是指当前所处的状态。

②条件：又称为“事件”。当一个条件被满足，将会触发一个动作，或者执行一次状态的迁移。

③动作：条件满足后执行的动作。动作执行完毕后，可以迁移到新的状态，也可以仍旧保持原状态。动作不是必需的，当条件满足后，也可以不执行任何动作，直接迁移到新状态。

④次态：条件满足后要迁往的新状态。“次态”是相对于“现态”而言的，“次态”一旦被激活，就转变成新的“现态”了。

简单应用

用HTML5、CSS3、Js做一个网页计算器,实现以下功能：

• 支持标准的四则运算。例如：1+2*3=7。
• 支持容错功能。比如输入： 6+++-2=4
• 支持等号的循环计算。比如输入： 2*3===54
  大致思路：三个状态P1 P2 P3
• P1: input x1
• P2: input calculate kind
• P3: input x2
• P4 :calcu

calculator.gif

$(document).ready(function () {
    //获取键盘上所有的数字和符号
    var keyBords=document.querySelectorAll(".row span");
    var keyBord = null;
    var preKey="";
    //status
    var P1=1;
    var P2=2;
    var P3=3;
    var status=P1;
    var contents="";//显示在express上面的
    var content="";//真正计算的
    var content3="";//p3
    var content2="";
    // var symbol = {"+":"+","-":"-","×":"*","÷":"/","%":"%","=":"="};
    for(var i=0;i<keyBords.length;i++){
        keyBord = keyBords[i];
        keyBord.onclick = function() {
          var number = this.innerHTML;
          clickNumber(number);
        }
    }
    function clickNumber(number){
        //p1
        if((number>0&&number<9)&&status==P1){
            status=P1;
            contents+=number;
            $("#express").text(contents);
        }
        //p2
        else if((number=="+"||number=="-"||number=="*"||number=="/")&&(status==P1||status==P2)){
            //容错
            if(preKey=="+"||preKey=="-"||preKey=="*"||preKey=="/"){
                // contents=contents.slice(0,-1);
                contents=contents.substring(0,contents.length-1);
                contents+=number;
                content2=number;

            }
                else{
                    status=P2;
                    contents+=number;
                    content2=number;
                }
            $("#express").text(contents);
        }
        else if((number>0&&number<9)&&status==P2){
            status=P3;
            content2+=number;
            contents+=number;
            $("#express").text(contents);
        }
        //四则运算
        else if(status==P3&&(number=="+"||number=="-"||number=="*"||number=="/")){
            status=P2;
            contents+=number;
            $("#express").text(contents);
        }
        else if(number=="CE"){
            contents="";
            content2="";
            content3="";
            preKey="";
            $("#express").text(0);
            $("#show").text(0);
            status=P1;
        }
        else if(number=="="){
            //等号循环
            if(preKey=="="){
                contents+=content2;
                contents+=content3;
                $("#show").text(eval(contents));
            }
            else{
                if(preKey=="+"||preKey=="-"||preKey=="*"||preKey=="/"){
                        contents=contents.substring(0,contents.length-1);
                    }
                    var result=eval(contents);
                     $("#show").text(result);
            }
        }
        preKey = number;
    }
})