今天完成的事
1.获取url的值
let NUMBER = window.location.search;//获取url中？后面的字符串
2.获得玩家的值并转换为可用的数组
console.log(GAMERS);
for(let i=0;i<GAMERS.length;i++){
if(GAMERS[i]==="0"){
GAMERS[i] = "平民";
}else{
GAMERS[i] = "杀手";
}
};
console.log(GAMERS);
3.学习本地存储
4.获取下方按钮的点击事件并使用sessionstorage存储按钮点击次数
$(document).ready(function(){
$("#button").on("click",function(){
if(sessionStorage.clickcount){
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
}else{
sessionStorage.clickcount = 1;
}
console.log(sessionStorage.clickcount);
})
});
5.将玩家数组作为比对 设定卡牌部分显示的内容
$("#button").on("click",function(){
if(sessionStorage.clickcount){ //点击一次鼠标点击次数加1
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
}else{ //初始次数为0
sessionStorage.clickcount = 0;
}
console.log(sessionStorage.clickcount);
console.log($(".img"))
if(sessionStorage.clickcount%2 == 0){ //当点击次数为偶数时
if(GAMERS[sessionStorage.clickcount] == "杀手"){
$(".img").attr("src","卡牌.png");
}else{
$(".img").attr("src","卡牌.png");
}
}else{ //当点击次数为奇数时
$(".img").attr("src","盖牌.png");
}
})
6.上面第二个第二层的if条件设置有问题 会一直不停的循环翻牌盖牌
并列添加了一个if语句 点击次数达到玩家数量之后 按钮执行另外的语句
if(sessionStorage.clickcount >= GAMERS.length){
$("#button").val("法官查看日志");
}
7.思考之后优化如下
$("#button").on("click",function(){
if(sessionStorage.clickcount){ //点击一次鼠标点击次数加1
sessionStorage.clickcount = Number(sessionStorage.clickcount)+1;
}else{ //初始次数为1
sessionStorage.clickcount = 1;
}
if(Number(sessionStorage.clickcount)/2<GAMERS.length){ //点击次数小于玩家数量内
if(sessionStorage.clickcount%2 == 0){ //当点击次数为偶数时 盖牌状态
//按钮显示查看当前号
$("#button").val("查看"+((Number(sessionStorage.clickcount)/2)+1)+"号");
//玩家序号显示当前玩家号
$(".number").text((Number(sessionStorage.clickcount)/2)+1); //当点击次数为奇数时
//显示盖牌图片
$(".img").attr("src","盖牌.png");
}else{ //当点击次数为奇数时 代开状态
//按钮显示隐藏并传给下一号
$("#button").val("隐藏并传递给"+((Number(sessionStorage.clickcount)/2)+1.5)+"号");
if(GAMERS[sessionStorage.clickcount] == "杀手"){ //当前玩家为杀手时
//显示杀手的图片
$(".img").attr("src","杀手.png");
}else{
//显示平民的图片
$(".img").attr("src","平民.png");
};
}
}
//点击到玩家
if((Number(sessionStorage.clickcount)/2)+0.5 == GAMERS.length){
$("#button").val("法官查看日志");
}
console.log("点击次数"+sessionStorage.clickcount);
console.log("玩家序号"+Number(sessionStorage.clickcount)/2);
})
明天的计划
1.学习jquery的隐藏与显示
2.不跳转隐藏页面并显示玩家方块
3.完成任务3
遇到的问题
1.编写获取时
console.log(NUMBER);
let RE = /number=\d*/; //正则表达式 /\d/匹配数字
NUMBER = NUMBER.match(RE); //将字符串中的数字使用正则匹配出数组 然后改变NUMBER的值
NUMBER = NUMBER.substring(1,4);
console.log(NUMBER);
控制台报错
后面发现NUMBER获取的是数组对象
将数组对象转换为字符串对象
NUMBER = (NUMBER.match(RE)+"").substring(7);
基本功不扎实啊 之前看到array没有想到是数组对象 直接用截取字符串的方法了
还得多看看基础知识
今天的收获
1.认真学习正则表达式 对于正则表达式的理解加深
正则表达式要么匹配位置 要么匹配字符
正则强大的地方在于有两种模糊方式
第一种是横向模糊
比如^ab{0,8}c$可以匹配ac、abc,也可以匹配abbbbbbbc.
b可以出现零次，也可以出现8次
可以不限制中间字符的长度
可以判断前后的字符 也可以判断中间的字符 可以不限定字符串的宽度
第二种是纵向模糊
比如^a[a-z]b$可以匹配abc、ahc、ayc等
中间的字符不限制是某个字符 可以是任一字符
其他位置也是同理
所以正则表达式两种模糊匹配
1）横向模糊（长度不限）
2）纵向模糊（字符不确定）
2.正则表达式中字符组
1）
指定一个字符的范围 例如[a-z]表示这个字符是a至z任一小写字母
2）排除范围
[^a-h]表示这个字符是除了a至h之外任一字符 也就是反向范围，求反的意思
3.正则表达式量词
{m,n}表示最少出现m次，最多出现n次。
？等于{0,1} 不出现或最多出现一次
+等于{1，}至少出现一次
*表示任意次（包括不出现）
贪婪匹配 /\d{2,4}/ 匹配123456时会输出1234 就是匹配条件内范围最大的值
懒惰匹配 /\d{2,4}？/匹配123456时会输出12 也就是两位数字 匹配范围内最小的条件 达到条件立即停止
4.正则表达式多选分支
/m|n/ 可以是m条件也可以是n条件 |表示或的意思
多选分支有先后顺序 达到m条件了n条件就不会尝试
例如 /a|b/ 匹配“ab” 输出“a”。
也就是惰性匹配
5.JS正则表达式完整教程（略长）
https://www.cnblogs.com/guaidianqiao/p/7615228.html
返回列表
评论