今天完成的事情
1.js有几种传参方式：
-URL：
把参数值附在url后面传递到其他页面
如：http://xxx.com/login.http?user=he123&pwd000000
其中'user=xxx'是参数名'pwd=xxx'是参数值
url特性：简洁，可同时传递多个参数；但url地址在客户端可见，容易泄密
应用：页面内表格的翻页可以用URL控制
-H5 web storage：
localStorage和sessionStorage
localStorage数据可以永久储存
sessionStorage数据会在访问结束后消失
应用：大型的文件用H5
-cookie：
使用浏览器Cookie传递参数
应用：记录登录信息用cookie
-Form表单：
Form表单通过URL传递参数
代码练习：
<!-- action 发送表单数据 -->
<!-- method="get"通过url传递数据，不安全 -->
<form action="js.任务5-1.html" method="post">
<p>用户名: <input type="text" name="user" value="he123" /></p>
<p>密码: <input type="password" name="pwd" value="000000" /></p>
<input type="submit" value="Submit" />
</form>
2.对一个数组filter,some,map,foreach的操作分别有什么作用
数组定义了5个迭代的方法(迭代是重复反馈过程的活动，其目的通常是为了逼近所需目标或结果。每一次对过程的重复称为一次“迭代”，而每一次迭代得到的结果会作为下一次迭代的初始值)
filter()对数组中每一项运行给定函数，返回改函数会返回true的项组成的数组
some()对数组中每一项运行给定函数，如果函数任意一项返回true，则返回true
map()对数组中每一项运行给定函数，返回每次函数调用的结果组成的函数
forEach()对数组中每一项运行给定函数，没有返回值
every()对数组中每一项运行给定函数，如果该函数每一项都返回true，则返回true
代码练习：
// 设置变量
var arr = [1, 2, 3, 4, 5]
console.log(arr)
// filter
var x = arr.filter(function (item, index, arr) {
return (item > 2)
})
console.log(x)// 3,4,5
// some
var y = arr.some(function (item, index, arr) {
return (item > 2)
})
console.log(y)// 1,2 false;3,4,5 true 所以为true
var y2 = arr.some(function (item, index, arr) {
return (item > 5)
})
console.log(y2)// 1,2,3,4,5 全部false; 所以为false
// map
var z = arr.map(function (item, index, arr) {
return (item > 2)
})
console.log(z)// false,false,true,true,true
// forEach
var m = arr.forEach(function (item, index, arr) {
return (item > 2)
})
console.log(m) // undefined
// every
var n = arr.every(function (item, index, arr) {
return (item > 2)
})
console.log(n)// 1,2 false;3,4,5 true 所以为false
var n2 = arr.every(function (item, index, arr) {
return (item > 0)
})
console.log(n2)// 1,2,3,4,5 true 所以为true
3.有限状态机
只会写法格式，不懂原理
如：任务4
// 获取有限状态机变量
var pro1 = document.getElementsByClassName('word')[0];
var pro2 = document.getElementsByClassName('word')[1];
var pro3 = document.getElementsByClassName('word')[2];
var pro4 = document.getElementsByClassName('word')[3];
var fsm = new StateMachine({
init: 'step1',
transitions: [
{ name: 'pro1', from: 'step1', to: 'step2' },
{ name: 'pro2', from: 'step2', to: 'step3' },
{ name: 'pro3', from: 'step3', to: 'step4' },
{ name: 'pro4', from: 'step4', to: 'step1' }
],
$('.main1').on("click", ".word1", function () {
if (fsm.state === 'step1') {
toKilling();
$(this).css('background-color', '#83b09a');
$(this).css('pointer-events', 'none');
}
fsm.pro1();
});
$('.main1').on("click", ".word2", function () {
if (fsm.state === 'step2') {
confirm('请死者亮明身份发表遗言！')
$(this).css('background-color', '#83b09a');
}
fsm.pro2();
});
$('.main1').on("click", ".word3", function () {
if (fsm.state == 'step3') {
confirm("玩家依次讨论！");
$(this).css('background-color', '#83b09a');
}
fsm.pro3();
});
// 投票
$('.main1').on("click", ".word4", function () {
if (fsm.state === 'step4') {
toVoting();
$(this).css('background-color', '#83b09a');
var totalday = $('.day-num').length - 1;
console.log(totalday);
$('.process-box').eq(totalday).css('display', 'none');
$('.today').eq(totalday).click(function () {
$('.process-box').eq(totalday).toggle();
});
}
fsm.pro4();
});
返回列表
评论