发表于: 2017-06-30 03:48:16
2 1034
前言:昨日的总结绍博师兄给出了改进意见,所以现在简单说一下任务二,三所用到的知识点。
1.本地存储
2.JSON
3.DOM操作——input值获取
4.Math对象——如何产生玩家数量配比
5.数组乱序
6.键盘事件
7.js中写入html
其他基础语法数组操作不在讲述之内
第二集 登堂
跟上一次一样,我们继续阅读一下任务步骤。
任务二的过程是这样的:输入一个玩家数字,动态的生成平民和杀手的人数。将平民和杀手身份打乱分发,点击开始游戏后跳转到身份分发页面,并把数据存在本地待用。
任务三是这样的:通过之前页面传过来的数据,将身份一一展示给大家看。
动态生成人数配比
在这个地方有两个思路,其一是写定,我们通过app得知所有玩家数量情况下的配比,然后通过判断按条件给两个变量赋值。
其二是通过Math对象,使用取整函数将获取到的总人数和杀手人数建立关系,然后相减得到平民人数。
从长远角度讲,这里最好用第二种方法,对于以后可能有的改版有帮助。
input值获取
amounts = document.getElementById(“amounts”).value;
.value代表获取此节点的值。
键盘事件
通过键盘事件可以在填入玩家数字之后,触发某种事件。
这里有onchange与onblur两种方法可以使用
onchange是在被改动的对象(如textbox)的值发生改变,并失去焦点的时候触发事件的,只比较对象的初始状态和改变后的状态(失去焦点后的状态)
onblur是失去焦点时触发
由于onblur只要失去焦点立即触发,所以性能不如onchange。
触发onchange事件后,将分配好的人数配比赋给两种身份
数组乱序
这里使用了一种洗牌算法,其算法思想就是 从原始数组中随机抽取一个新的元素到新数组中。
从还没处理的数组中,产生一个[0, n]之间的随机数 random。
从剩下的n个元素中把第 random 个元素取出到新数组中。
删除原数组第random个元素。
重复第 2 3 步直到所有元素取完。
最终返回一个新的打乱的数组。
详情点击我之前关于洗牌算法的专题enter link description here
使用时直接将数组调用这个方法即可
本地存储
最常用的有两种:
sessionStorage用于本地存储一个会话(session)中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储,仅仅是会话级别的存储。
而localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的。
由于此任务只是一个简单的页面之间的关系,所以使用sessionStorage。
存数据到本地:sessionStorage.setItem(“key”, “value”);
从本地取数据:var value = sessionStorage.getItem(“key”);
JSON
由于sessionStorage只能存储字符串,所以需要将数组封装成一个可以存储的数据类型,所以要使用JSON,JSON是一种轻量级的数据交换格式,用于数据类型转化,方便传输。
JSON.stringify(obj)将JSON转为字符串。JSON.parse(string)将字符串转为JSON格式
若JSON对象是一个数组,JSON.stringify只是把其中的内容转化成字符串,其本质还是数组
点击之后,将各个数据对象转换为字符串,然后存入sessionStorage方便后面使用,并跳转到下个页面。
任务三是两个页面互相跳转,观察可得,页面上的所有内容只有头像上的小圆点和按钮上的文字有所变化,我们观察小圆点和底部两个数据的变化,得到两个数列,通过math方法的计算得到这两个数列,并通过操作DOM赋给页面html;然后通过上个页面传过来的记录所有玩家的数组长度,控制计算出来的数字不要超过上限。
任务二三并不难,大多让我们学会基础语法并使用。
明天将会带来任务四的解读。
评论