今天完成的事情：
在师兄的指导下完成了法官日志页面。
明天计划的事情：
继续完成任务页面。
遇到的问题：
Js还是知识点不会，准备看看师兄的日报，学点东西。
收获：
一、选择器
类选择器，用在对文档要应用样式，而不考虑具体涉及的元素时，首先对文档进行标记，输入class属性并且指定一个值，在使用的时候只要在值的前面加上（.）级可以使用这个类选择器。
需要注意：
1、英文圆点开头
2、其中类选器名称可以任意起名（但不要起中文）
在很多方面，ID选择器都类似于类选择符，但也有一些重要的区别：
1、为标签设置id="ID名称"，而不是
2、ID选择符的前面是井号（#）号，而不是英文圆点（.）。
根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次.
尽管你会发现即便你把几个元素都命名成相同的id名字，css选择器还是会把这些元素都选中应用样式（如class选择器那样），对于css选择器，id属性的唯一性似乎不存在。
然而，对于js而言，它只会选择具有相同id名字元素中的第一个。出于一个好的编程习惯，同一个id不要在页面中出现第二次。
相同点：可以应用于任何元素
不同点：
1、ID选择器只能在文档中使用一次。与类选择器不同，在一个HTML文档中，ID选择器只能使用一次，而且仅一次。而类选择器可以使用多次。
2、可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式，但只可以用类选择器的方法实现，ID选择器是不可以的（不能使用 ID 词列表）。
3、id和class共存时id要优先于class的
在一般情况下：
我们利用class来为元素添加样式----css
我们利用id来为元素添加行为----js/jQuery
二、跳转页面
为什么要用js跳转，和a标签跳转页面有什么不同？？
即是a标签只能点击就跳转，不能点击不跳转，js可以控制跳转。
1、在原来的窗体中直接跳转用
<script type="text/javascript">
window.location.href="你所要跳转的页面";
</script>
2、在新窗体中打开页面用：
<script type="text/javascript">
window.open('你所要跳转的页面');
</script>
三、calc()函数
calc()
这个函数的基本知识
用于动态计算长度值。
- 需要注意的是，运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)； - 任何长度值都可以使用calc()函数进行计算；
- calc()函数支持 "+", "-", "*", "/" 运算；
- calc()函数使用标准的数学运算优先级规则；
即在一边定宽一边自适应的布局非常好用的一个函数
三、JS获取input的value值
常用的有三种方法
1.用document.getElementById(“id名”).value来获取；
2.通过form表单中的id名或者name名来获取。
3.通过id名（不用写getElementById，也不用放在表单中）直接获取value值。但是直接通过value值获取需要注意以下几点：
①变量名不能和id名一样，否则无效；
②函数名不能和id名一样，否则无效；
③如果需要获取的id外面还有盒子，不能像表单那样，将盒子的name或者id写在前面，eg： var aa=box.need_id.value 是不行的，应该直接写 var aa=need_id.value ;
四、翻盘页面代码
var a = sessionStorage.getItem("shu");
var shu = a.split(",");
var orlm = sessionStorage.getItem("orlm");
var killer = sessionStorage.getItem("killer");
是为了获取本地储存的数组
$("#role").hide();
var i = 0;
var t = 0;
var f = 1;
$(".circle").text(t + 1);
$(".word-4").text("查看" + f + "号身份");
f++;
网页加载好后，先将角色隐藏；然后设置查看身份的点击监听，设置初始值，初始翻页页面的展示的内容
$("#bton").click(function () {
if (i < shu.length * 2 - 2) {
if (i == 0 || i % 2 == 0) {
$(".img3").hide();
$("#role").show();
$(".word-1").text("角色:" + shu[t]);
$(".circle").text(t + 1);
$(".word-4").text("隐藏并传递给" + f + "号");
if (shu[t] == "杀手") {
$(".word-2").text("词组:" + killer);
}
else if (shu[t] == "平民") {
$(".word-2").text("词组:" + orlm);
}
t++;
i++;
console.log(t, i, f);
}
else {
$("#role").hide();
$(".img3").show();
$(".circle").text(t + 1);
$(".word-4").text("隐藏并传递给" + f + "号");
i++;
f++;
console.log(t, i, f);
}
}
else if (i == (t + 1) * 2 - 2) {
$(".word-1").text("角色:" + shu[t]);
if (shu[t] == "杀手") {
$(".word-2").text("词组:" + killer);
}
else if (shu[t] == "平民") {
$(".word-2").text("词组:" + orlm);
}
$(".img3").hide();
$("#role").show();
$(".circle").text(t + 1);
$(".word-4").text("法官页面");
i++;
}
else {
location.href = "file:///G:/task/task3/judge/judge.html";
}
});
});
1、是点击函数，对其点击来实现下面的一系列任务 ；判断，来进行翻页所展现正确的的内容；符合判定，执行下面的任务，跳转法官页面前最后一张身份牌；因最后一张容易判定错误；直接给它单独判定；上面的判定都失去意义，下面命令生效，跳转页面。
2、嵌套判定，当上面的两种判定都符合要求，以下任务运行，并循环至失去要求目的；符合主要求但，第一个嵌套要求否定，执行下面任务，并循环
五、法官日志代码
var a = sessionStorage.getItem("shu");
获取上个页面各玩家身份及编号，用于创建格子
var shu = a.split(",");
给他们加上引号和都好，使他们成为数组
if (sessionStorage.getItem("person") != null) {
var person = JSON.parse(sessionStorage.getItem("person"));
}
else {
var person = [];
for (let i = 0; i < shu.length; i++) {
person[i] = {
Number: (i + 1) + "号",
shu: shu[i],
condition: "alive",
beVote: 0,
beKill: 0
}
}
sessionStorage.setItem("person", JSON.stringify(person));
}
获取之前的角色，杀手和平民，如果不为空的话，就输出；如果为空，就进行循环操作
for (var i = 0; i < shu.length; i++) {
$(".top").append('<div class="box">' +
'<div class="square">' +
'<p class="word-1">' + shu[i] + '</p>' +
'<p class="word-2">' + (i + 1) + '号</p>' +
'</div>' +
'</div>')
}
这个就是创建玩家的格子，如图：
返回列表
评论