今天完成的事
任务四部分页面的页面css以及代码控制逻辑；
html：
控制代码：
var fsm = new StateMachine ({
init: '0',
transitions: [
{name: 'step1', from: '0', to: '1'},
{name: 'step2', from: '1', to: '2'},
{name: 'step3', from: '2', to: '3'},
{name: 'step4', from: '3', to: '4'}
],
methods: {
onStep1: function() { alert("操作成功")},
onStep2: function() { alert("请死者亮明身份并且发表遗言") },
onStep3: function() { alert("玩家依次发言讨论") },
onStep4: function() { alert("操作成功") }
}
})
// console.log(fsm.state);
// fsm.step1();
// console.log(fsm.state);
$(".process-one").click(function() {
if (fsm.state == 0) {
fsm.step1();
$(this).css("background-color","#83b09a").addClass("change");
}else {
alert("请进行游戏下一项活动");
}
});
//以下 类change的添加用于jQuery控制伪元素::before；
$(".process-two").click(function() {
if (fsm.state == 1) {
fsm.step2();
$(this).css("background-color","#83b09a").addClass("change");
}else {
alert("请顺序操作");
}
});
$(".process-three").click(function() {
if (fsm.state == 2) {
fsm.step3();
$(this).css("background-color","#83b09a").addClass("change");
}else {
alert("请顺序操作");
}
});
$(".process-four").click(function() {
if (fsm.state == 3) {
fsm.step4();
$(this).css("background-color","#83b09a").addClass("change");
}else {
alert("请顺序操作");
}
});
//可点击用于隐藏或展示每天的游戏信息
$(".start-day").click(function() {
$(".start-process").toggle();
$(".start-sign-box").toggle();
});
明天的计划
1，黑夜杀手杀人和白天玩家投票的逻辑连接；
遇到的问题
状态机的使用，在看了许多状态机讲解文章之后，直到晚上突然明白自己对状态机的理解有误，现以解决；
收获
1，对状态机理解的改正：
（1）【错误的】在原来理解的状态机中，认为是通过状态的改变触发相应的函数执行语句，于是陷入了如何改变状态触发函数上，于是乎执行出错；
（2）【正确的】 现在的理解，直接函数调用即使得一个状态变化到另一个状态；
2，Jquery对伪元素的控制，：（添加样式）
因为实现每个步骤前面的三角标号事使用的是伪类，所以需要js对伪元素控制的办法
html：
<div class="techbrood" id="td_pseudo">222222</div
css：(原样式）
.techbrood:before {
width: 0;
}
第一种方法：直接添加新样式
$('head').append("<style>.techbrood::before{ width:100% }</style>");
第二种方法：添加类
$('#td_pseudo').addClass("change");
然后再在css文件中添加相应的样式：
.techbrood.change:before{
width: 100%;
}
注意：【 .change】前面不要有空格
返回列表
评论