【有限状态机问题 _有限状态机】

有限状态机问题

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(1)

有限状态机

详细描述

截图

代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .green,
        .yellow,
        .red,
        .clear {
            display: inline-block;
            margin: 1rem;
            width: 5rem;
            height: 5rem;
            border: solid 1px #000;
            border-radius: 50%;
        }

        .green {
            background: green;
        }

        .yellow {
            background: yellow;
        }

        .red {
            background: red;
        }
    </style>
</head>

<body>
    <div class="green"></div>
    <div class="yellow"></div>
    <div class="red"></div>
    <br>
    <div class="clear"></div>

    <script src="jquery-3.3.1.min.js"></script>

    <script src="state-machine.js"></script>
    <script>
        var fsm = new StateMachine({
            init: 'green',//从green开始
            transitions: [{
                    name: 'warn',
                    from: 'green',
                    to: 'yellow'
                },
                {
                    name: 'panic',
                    from: 'yellow',
                    to: 'red'
                },
                {
                    name: 'calm',
                    form: 'red',
                    to: 'yellow'
                },
                {
                    name: 'clear',
                    from: 'yellow',
                    to: 'green'
                }
            ]
        })


        $('.green').on('click', function () {
            console.log(fsm.can('warn'));
            fsm.warn();
        })

        $('.yellow').on('click', function () {
            console.log(fsm.can('panic')); 
            fsm.panic();
        })

        $('.red').on('click', function () {
            console.log(fsm.can('calm'));
            fsm.calm();
        })

        $('.clear').on('click', function () {
            console.log(fsm.can('clear'));
            fsm.clear();
        })





    </script>
</body>



</html>

编辑于2024-11-24

时间排序

热门排序

[上海|荣耀师兄]JS-郑佳威
0

{
name: 'calm',
form: 'red',
to: 'yellow'
},

from: 'red'

查看全部>

编辑于2018-09-07

去第页