今日完成
杀人投票页流程
状态机基本流程完成
明日计划
增加胜利判断
增加天数信息
遇到的问题
在有限状态机这里卡了很久
//设置初始状态的变量
// 初始化状态
//通过本地存储状态
var fsmState = sessionStorage.getItem("fsmState");
// 返回的事字符串 null 加""
if (fsmState == "null") {
//默认为start状态
fsmState = "start";
}
//引入状态机类库后创建状态机
var fsm = new StateMachine({
//创建初始状态
init: fsmState,
transitions: [
//不同状态转换情况 name 代表状态
{ name: "step1", from: "start", to: "step1" },
{ name: "step2", from: "step1", to: "step2" },
{ name: "step3", from: "step2", to: "step3" },
{ name: "step4", from: "step3", to: "step4" },
],
//方法
methods: {
//onStep1 代表当处于Step1状态时执行function
onStep1: function () {
$(".step1").addClass("bgcolor");
},
onStep2: function () {
$(".step1").addClass("bgcolor");
$(".step2").addClass("bgcolor");
},
onStep3: function () {
$(".step1").addClass("bgcolor");
$(".step2").addClass("bgcolor");
$(".step3").addClass("bgcolor");
},
onStep4: function () {
$(".step1").addClass("bgcolor");
$(".step2").addClass("bgcolor");
$(".step3").addClass("bgcolor");
$(".step4").addClass("bgcolor");
},
},
});
//当点击第一个杀手杀人时
$(".step1").click(function () {
//判断当前状态 已初始化为start
if (fsm.state == "start") {
//切换状态
fsm.step1();
//页面跳转
window.location.href = "page5.html";
// 存储当前状态至本地 这样跳转页面后状态不会重置
fsmState = fsm.state;
sessionStorage.setItem("fsmState", fsmState);
} else {
alert("请按顺序点击");
}
});
被杀信息及状态机状态需要跨页面存在，所以需要本地存储，需要时进行调用
被杀信息调用
var killedArr = sessionStorage.getItem("killedArr");
数据判断
if (killedArr != "null") {
数据类型转换
killedArr = killedArr.split(",");
}
原先使用的事append加for循环添加盒子
后发现特别复杂，且不易绑定事件
选择使用clone产生盒子
// 通过本地储存获得 数组
var identifyArr = localStorage.getItem("identifyArr");
// 字符串转数组
identifyArr = identifyArr.split(",");
console.log(identifyArr);
// 创建盒子
for (var i = 0; i < identifyArr.length; i++) {
// 克隆后追加至末尾
$(".block_id").first().clone().appendTo("main.page5").show();
// 修改文字数据
$(".block_id")
.eq(i + 1)
.find(".block_id_head")
.text(identifyArr[i]);
$(".block_id")
.eq(i + 1)
.find(".block_id_num")
.text(i + 1 + "号");
}
利用事件委托实现子元素的点击事件
// 事件委托
$(".block_id").on("click", function (event) {
// 排他 隐藏
$(".block_id_select").hide();
// 点击显示图标
$(event.target).parent().find(".block_id_select").show();
console.log($(event.target).parent().index());
// 获取选中的索引值
killId = $(event.target).parent().index();
console.log("killId：" + killId);
});
// 阻止子元素冒泡
$(".block_id_select").click(function () {
event.stopPropagation();
});
将被杀者信息存储
$("footer")
.find(".kill_confirm")
.click(function () {
if (identifyArr[killId - 1] == "杀手") {
alert("不可以");
} else {
killedArr.push(killId);
console.log("killedArr:" + killedArr);
sessionStorage.setItem("killedArr", killedArr);
// 页面跳转
window.history.back(-1);
}
});
返回列表
评论