发表于： 2019-03-15 22:30:32
1 717
今天完成的事情：
1、今天吸取了昨天的教训，放慢了速度，所以今天只写了一个页面，昨天和楠哥聊了聊，楠哥说我学习的态度有了，但是学习方法不对，这一点上我要及时改正，学会正确的学习方法，这对以后的路很重要。
2、以下是今天所写的js代码视图：
var arr = sessionStorage.players;
players = JSON.parse(arr);
console.log(players);
//取序号
var para=document.getElementById('num');
var search=document.getElementById("search");//按钮键
var btnNum=0;//
var hid1=document.getElementsByClassName('hidden1');
var hid2=document.getElementsByClassName('hidden2');
var num=0;//身份号
var roles=0;//身份
//页面初始化
function reset(){
for (var i = 0; i < hid2.length; i++) {
hid2[i].style.display="none";
}
num+=1
para.textContent=num;
search.textContent="查看"+num+"号身份";
};
//点击按钮进入不同页面
window.onload=reset;
document.getElementById("search").onclick=function btnClick(){
//！！！！！！判断人数到达设定值！！！！！
if(btnNum==2*players.length-1){
document.getElementById("search").onclick=location.href="js2-4.html";
alert("法官查看")
//！！！！！！判断为偶数时！！！！！！
}else if(btnNum%2==0){
//显示角色图片
for (var i = 0; i < hid2.length; i++) {
hid2[i].style.display="block";
}
//隐藏翻牌图片
hid1[0].style.display="none";
//修改角色内容
hid2[1].textContent="角色:"+players[roles];
roles++
//修改身份号
para.textContent=num;
num++
//修改按钮内容
search.textContent="隐藏并传递给"+num+"号";
console.log(btnNum)
btnNum+=1;
if(btnNum==2*players.length-1){
search.textContent="法官查看";
}
//！！！！！判断为奇数时！！！！！！！！
}else{
//隐藏角色图片
for (var i = 0; i < hid2.length; i++) {
hid2[i].style.display="none";
}
//显示翻牌图片
hid1[0].style.display="block";
//修改身份号
para.textContent=num;
//修改按钮内容
search.textContent="查看"+num+"号身份";
btnNum+=1;
}
};
此处是为了在页面上显示出当前所查看的人是几号以及什么身份
此处为实现隐藏翻牌图片、变化角色的内容、变化玩家身份号码以及变化按钮的内容
明天计划的事情：
1、明天计划继续写页面代码，并养成一个好的学习习惯，以便以后的工作和更好的写代码。
遇到的问题：
1、今天没有遇到什么实质性的问题。
收获：
1、今天学习了有限状态机，那么什么是有限状态机呢？
有限状态机，（英语：Finite-state machine, FSM），又称有限状态自动机，简称状态机，是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。其作用主要是描述对象在它的生命周期内所经历的状态序列，以及如何响应来自外界的各种事件。在计算机科学中，有限状态机被广泛用于建模应用行为、硬件电路系统设计、软件工程，编译器、网络协议、和计算与语言的研究。
我们来看一下阮一峰对有限状态机的描述：
它有三个特征：
状态总数（state）是有限的。
任一时刻，只处在一种状态之中。
某种条件下，会从一种状态转变（transition）到另一种状态。
它对JavaScript的意义在于，很多对象可以写成有限状态机。
举例来说，网页上有一个菜单元素。鼠标悬停的时候，菜单显示；鼠标移开的时候，菜单隐藏。
如果使用有限状态机描述，就是这个菜单只有两种状态（显示和隐藏），鼠标会引发状态转变。
var menu = {
// 当前状态
currentState: 'hide',
// 绑定事件
initialize: function() {
var self = this;
self.on("hover", self.transition);
},
// 状态转换
transition: function(event){
switch(this.currentState) {
case "hide":
this.currentState = 'show';
doSomething();
break;
case "show":
this.currentState = 'hide';
doSomething();
break;
default:
console.log('Invalid State!');
break;
}
}
};
但实际上我们只是需要转换一个状态而已，鼠标移上去显示菜单，否则隐藏，
上面的代码就比较低效和笨拙，把简单问题复杂化了。
所以，问题规模小的时候，if-else 就可以工作的很好了，但当问题规模一大，
无论是大量的 if-else还是问题解决方案的本身将会复杂庞大难以维护，这时候引入状态机的概念就非常行之有效了。
并且当我们把状态机的实现交给javascript-state-machine这种库上时，我们其实只用关心解决方案的本身，而不用自己去实现状态机。
当我们只用关心解决方案本身的时候，解决问题的难度毫无疑问是变简单了的。
返回列表
评论