[上海|结业弟子]JS-王玺|2019年12月13日的日报-技能树.IT修真院

发表于： 2019-12-13 19:55:02

1 1118

今天完成的工作

今天完成了游戏结果界面的跳转显示，将游戏的结果分为两个状态一种是平民胜利一种是杀手胜利，平民胜利的条件为杀死所有杀手，杀手胜利的条件是杀手人数与平民人数相同。在这个页面中我学到了新的知识，可以使用字符串的拼接直接在我们的html中添加我们需要的内容，在这个页面中要重复添加的是天数显示。而显示的天数是根据死亡人数的数组长度来判断的，所以我的做法是将我们的第x天中x为一个变量与我们循环条件相一致，而后将每天的字符串存在数组中，而后再通过一次循环将数组中的每一项加入在一个变量中，形成一个整体的字符串添加在html中。

for(i=1;i<day+1;i++){
    add="<div class='day'><div class='day1'>第"+ i+ "天<div class='time'>0小时07分</div></div><div class='content1'>晚上：<div class='nightkill-id'></div>号被杀手杀死，身份是<div class='nightkill-sf'></div><br><div class='baitian'>白天：<div class='daykill-id'></div>号被全民投票投死，身份是<div class='daykill-sf'></div></div></div></div>"
    ksz[i-1]=add
}
console.log(ksz)
//将数组中的每一项拼接起来
var tol="";
for(i=0;i<ksz.length;i++){
tol=tol+ksz[i]
}
 p.innerHTML=tol

将我们的天数显示出来之后就需要把我们每一天的死亡信息传入到相应的位置，依旧是使用for循环来实现，我们可以通过死亡状态数组的长度来确定天数，通过dom中取类名数组的方式，第一天索引为0第二天索引为1的方式循环执行innerhtml加入的内容一个是身份和编号，其中与天数存在两倍的关系

for(let i=0;i<Math.ceil(lent.length/2);i++){
    document.getElementsByClassName("nightkill-id")[i].innerHTML=lent[2*i]
    document.getElementsByClassName("nightkill-sf")[i].innerHTML=whichsf[lent[2*i]-1]
    document.getElementsByClassName("daykill-id")[i].innerHTML=lent[2*i+1]
    document.getElementsByClassName("daykill-sf")[i].innerHTML=whichsf[lent[2*i+1]-1]
}

另外当我们是夜晚结束的过程的话要给它做一个当天的白天内容消失

//夜晚结束游戏时需要把当天白天内容删除
if(lent.length%2==1){
    document.getElementsByClassName("baitian")[Math.ceil(lent.length/2)-1].style.display="none"
}

今天还看来一下任务二中的滑轮如何实现，需要和我们的value值绑定起来

明天要完成的任务

明天要继续完善任务二到四，争取完成，并开始看jquery的内容。慢慢重构任务2-4

遇到的问题

遇到的问题还是对这些写法逻辑不够熟练，需要好好整理整理，多看看他人的方法写法

返回列表

【任务1】 [上海|结业弟子]JS-王玺 | 2019年12月13日 的日报 中品

评论

分享到

【任务1】 [上海|结业弟子]JS-王玺 | 2019年12月13日的日报中品