【关于有限状态机的部分，如果使用了有限状态机的话，那么我点击以后渲染出了页面文字 _本地储存】

关于有限状态机的部分，如果使用了有限状态机的话，那么我点击以后渲染出了页面文字
我也踩过这个坑( 1 )
已统计您的踩坑,无需重复点击
回答(1)
本地储存
详细描述
截图
代码
// 读取上个页面保存的数值
var data = JSON.parse(sessionStorage.getItem('PartArr'));
console.log(data)

// 制作点击事件杀人页面第一个选项
var box2 = document.getElementsByClassName('box2')[0];
var bo = 0;
var sk = document.getElementsByClassName('show');
var sk1 = document.getElementsByClassName('show1');
// 右上角点击返回最初页面点击事件
var finish = document.getElementsByClassName('finish')[0].onclick = function () {
    window.location = './../js2-1/js2-1.html';
}
// 声明天数
// var ts;


if (sessionStorage.getItem('PartArr')) {
    sk.innerHTML = data;
}

function box1() {
    if (bo == 0) {
        box2.style.display = 'none';
        bo += 1;
    } else if (bo == 1) {
        box2.style.display = ''
        bo = 0;
    }
}
// --------------------------------------------------------
// 先声明变量，初始值
if (sessionStorage.cszt) {
    var cszt = sessionStorage.cszt;
} else {
    var cszt = 'pagetokill';
}





// 首先获取类名的DOM节点
var Boxtokill = document.getElementsByClassName('Box-to-kill')[0];
var Boxtokill1 = document.getElementsByClassName('Box-to-kill')[1];
var Boxtokill2 = document.getElementsByClassName('Box-to-kill')[2];
var Boxtokill3 = document.getElementsByClassName('Box-to-kill')[3];

// 有限状态机开始

var murderq = new StateMachine({
    // 初始状态:杀人页面
    init: cszt,
    transitions: [
        // 准备好的状态
        // 1准备杀人，2，杀人页面，3，选择杀人↓
        {
            name: 'readytokill',
            from: 'pagetokill',
            to: 'choosetokill'
        },
        // // 1死者遗言，2,选择杀人，3，发表遗言↓
        {
            name: 'thelastwords',
            form: 'choosetokill',
            to: 'publishedlastwords'
        },
        // // 1玩家发言,2发表遗言,3,玩家说话
        {
            name: 'theplayertospeak',
            form: 'publishedlastwords',
            to: 'playerstalk'
        },
        // //1全名投票，2玩家发言，3
        {
            name: 'referendum',
            form: 'playerstalk',
            to: 'vote'
        }
    ],
    // 点击之后输出的对话框
    methods: {
        onEnterChoosetokill: function () {
            // 第一个步骤判断，判断死亡的人进行渲染
            for (let kk = 0; kk < data.length; kk++) {
                if (data[kk].status === '死亡') {
                    sk[0].innerHTML = data[kk].num + '号被杀手杀死，真实身份是平民';
                    Boxtokill.style.background = 'black';
                }
            };
        },
        // 第二个步骤
        onEnterPublishedlastwords: function () {
            alert('死者发表遗言');
            Boxtokill1.style.background = 'black';
            //  重新执行一遍，保存数据
            for (let kk = 0; kk < data.length; kk++) {
                if (data[kk].status === '死亡') {
                    console.log(data[kk].num + '号被杀手杀死，真实身份是平民');
                    sk[0].innerHTML = data[kk].num + '号被杀手杀死，真实身份是平民';
                    Boxtokill.style.background = 'black';
                }
            };
        },

        onEnterPlayerstalk: function () {
            alert('玩家开始发言');
            for (let kk = 0; kk < data.length; kk++) {
                if (data[kk].status === '死亡') {
                    sk[0].innerHTML = data[kk].num + '号被杀手杀死，真实身份是平民';
                    Boxtokill.style.background = 'black';
                }
            }
            Boxtokill2.style.background = 'black';
            Boxtokill1.style.background = 'black';
        },

        onEnterVote: function () {
            // alert('开始投票');
            // window.location = './../js4投票/js4-tp.html';
            for (let kk = 0; kk < data.length; kk++) {
                if (data[kk].status === '死亡') {
                    sk[0].innerHTML = data[kk].num + '号被杀手杀死，真实身份是平民';
                    Boxtokill.style.background = 'black';
                    console.log(sk1)
                    sk1[0].innerHTML = data[kk].num + '号被投死，真实身份是' + data[kk].breed;
                    Boxtokill3.style.background = 'black';
                }
            }
            Boxtokill2.style.background = 'black';
            Boxtokill1.style.background = 'black';
            Boxtokill3.style.background = 'black';
        }
    }
});
// 第一个点击事件
Boxtokill.onclick = function () {
    switch (murderq.state) {
        case 'pagetokill':
            // 如果是这样的初始状态的情况下，就保存下来
            cszt = 'choosetokill';
            // 保存当前状态
            sessionStorage.cszt = cszt;
            console.log(cszt);
            window.location = './../js4杀手杀人/js4-3.html';
            murderq.readytokill();
            break;
        case 'choosetokill':
            alert('请按照顺序');
            break;
        case 'publishedlastwords':
            alert('请按照顺序操做');
            break;
        case 'playerstalk':
            alert('请按照顺序操作');
            break;
    }
    console.log(murderq.state)
}
// 第二个点击事件
Boxtokill1.onclick = function () {
    switch (murderq.state) {
        case 'pagetokill':
            alert('请按照顺序操作');
            break;
        case 'choosetokill':
            murderq.thelastwords();
            break;
        case 'publishedlastwords':
            alert('请按照顺序');
            // 保存当前状态
            sessionStorage.cszt = murderq.state;
            break;
        case 'playerstalk':
            alert('请按照顺序操作');
            break;
    }
    console.log(murderq.state);
}
console.log(murderq.state)
// 第三个点击事件
Boxtokill2.onclick = function () {
    switch (murderq.state) {
        case 'pagetokill':
            alert('请按照顺序');
            break;
        case 'publishedlastwords':
            murderq.theplayertospeak();
            sessionStorage.cszt = murderq.state;
            break;
        case 'choosetokill':
            alert('请按照顺序操作');
            break;
        case 'playerstalk':
            alert('请按照顺序操作');
            break;
    }
    console.log(murderq.state)
}

// 第四个点击事件
Boxtokill3.onclick = function () {
    switch (murderq.state) {
        case 'pagetokill':
            alert('请按照顺序');
            break;
        case 'playerstalk':
        murderq.referendum();
        alert('开始投票');
        window.location = './../js4投票/js4-tp.html';
            sessionStorage.cszt = murderq.state;
            break;
    }
}
console.log(murderq.state);
编辑于2024-11-24
时间排序
热门排序
[上海|荣耀师兄]JS-周能
0

这个应该不是你的状态机的问题，应该是你的数据存储的问题和渲染的问题，状态机跟你渲染数据没有关系的

查看全部>

编辑于2018-12-28
去第页