发表于： 2020-06-02 23:06:28
1 2134
今天完成的事情：今天写了后续的页面
明天计划的事情：继续后续的页面
遇到的问题：理清逻辑需要时间需要更多的联系
收获：今天写了最后一个页面
html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="bootstrap.css">
<link rel="stylesheet" href="f3.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
<div class="tb">
<a href="f.html"><img src="./images/06.png" alt=""></a>
<span class="z1">游戏结果</span>
<a href="f.html"><img src="./images/07.png" alt=""></a>
</div>
<div class="d2">
<div class="picture"></div>
<span class="z2"><b></b></span>
<span class="z3">本次游戏共计用时0小时35分钟<br>
<div class="profession"></div>
卧底词汇：安新觉罗<br>
水民词汇：努尔哈赤
</span>
</div>
<div class="main">
</div>
<div class="db">
<a href="f.html">
<div class="d4">
再来一局
</div>
</a>
<div class="d5">
上传并分享
</div>
</div>
<script src="./f3.js"></script>
</body>
</html>
css代码
body{
letter-spacing:1px;
margin-bottom: 64px;
}
.tb{
background-color: #29bde0;
display: flex;
justify-content: space-between;
align-items: center;
height: 35px;
border-bottom: solid #74d4eb 1px;
}
.z1{
position: relative;
top: 4px;
color: white;
font-size: 14px;
}
.z2{
display: block;
color: #ffc865;
font-size: 15px;
}
.t1{
display: block;
margin: 0px auto 11px;
}
.d2{
padding: 0 12.5vw 9px;
background-color: #29bde0;
}
.z3{
color: white;
font-size: 12px;
}
h5{
display: inline;
margin: 0 41vw 0 0;
}
.z5{
display: block;
font-size: 13px;
color: #a6a6a6;
padding: 11px 0;
white-space: nowrap;
letter-spacing:0;
}
.d3{
padding: 6px 12.5vw;
border-bottom: #a6a6a6 solid 1px;
}
.z4{
display: inline-block;
color: #d5d5d5;
font-size:10px;
}
.db{
height: 64px;
position: fixed;
left: 0;
right: 0;
bottom: 0;
background: rgba(153, 223, 240, 0.5);
padding: 11px 0 10px ;
display: flex;
}
.d4{
height: 44px;
width: 42vw;
margin: 0 4vw;
background-color: #f66f6f;
text-align: center;
line-height: 44px;
border-radius: 6px;
color: white;
}
.d5{
height: 44px;
width: 42vw;
margin: 0 4vw;
background-color: #fbb435;
text-align: center;
line-height: 44px;
border-radius: 6px;
color: white;
}
.h1{
display: flex;
justify-content: space-between;
font-size: 12px;
margin: 0px;
}
.picture{
height: 150px;
background: url(./im2/center.png) center 12px no-repeat;
background-size: 200px 120px;
display: flex;
justify-content: center;
align-items: flex-end;
flex-wrap: wrap;
background-color: rgb(41, 189, 224);
line-height: 82px;
font-weight: 700;
color: #fff;
font-size: 18px;
}
.gameMessage {
border-bottom: 1px solid #e6e6e6;
height: 82px;
padding: 6px 52px 10px 39.5px;
}
.firstLine {
margin-bottom: 14px;
display: flex;
justify-content: space-between;
}
.firstLineLeft {
color: black;
}
.firstLineRight {
font-size: 12px;
color: rgb(166, 166, 166);
margin-top: 3px;
}
.secondLine {
font-size: 12px;
color: rgb(166, 166, 166);
margin: 5px 0;
}
js代码
var day = sessionStorage.getItem("day") || 1;
var killerArr = JSON.parse(sessionStorage.getItem("killerArr"));
var civiliansArr = JSON.parse(sessionStorage.getItem("civiliansArr"));
var killerDeath = JSON.parse(sessionStorage.getItem("killerDeath")) || [];
var civiliansDeath = JSON.parse(sessionStorage.getItem("civiliansDeath")) || [];
var allDeath = JSON.parse(sessionStorage.getItem("allDeath")) || [];
console.log(killerArr.length)
console.log(killerDeath.length)
console.log(civiliansArr.length)
console.log(civiliansDeath.length)
console.log(allDeath);
console.log(day);
if (killerArr.length == killerDeath.length) {
$(".picture").text("平民胜利");
$(".z2").text("太棒了！你知道么？在捉鬼游戏中有67%的平民取得游戏最终的胜利哦！");
} else {
$(".picture").text("杀手胜利");
$(".z2").text("太棒了！你知道么？在捉鬼游戏中有33%的杀手取得游戏最终的胜利哦！");
}
$(".profession").text("杀手还有" + (killerArr.length - killerDeath.length) + "人" + "平民还有" + (civiliansArr.length - civiliansDeath.length) + "人");
var y = 0;
for (let i = 0; i <= day - 1; i++) {
y += 2;
if (i < day - 1) {
$(".main").append(`
<div class="gameMessage">
<div class="firstLine">
<div class="firstLineLeft">第${i + 1}天</div>
<div class="firstLineRight">0小时07分</div>
</div>
<div class="secondLine">晚上：${allDeath[y - 2].number}号被杀手杀死，身份是${allDeath[y - 2].name}</div>
<div class="secondLine">白天：${allDeath[y - 1].number}号被投票投死，身份是${allDeath[y - 1].name}</div>
</div>`)
} else {
$(".main").append(`
<div class="gameMessage">
<div class="firstLine">
<div class="firstLineLeft">第${i + 1}天</div>
<div class="firstLineRight">0小时07分</div>
</div>
<div class="secondLine">晚上：${allDeath[y - 2].number}号被杀手投死，身份是${allDeath[y - 2].name}</div>
</div>`)
}
}
console.log(y);
最后主要就是显示的问题了
var day = sessionStorage.getItem("day") || 1;
var killerArr = JSON.parse(sessionStorage.getItem("killerArr"));
var civiliansArr = JSON.parse(sessionStorage.getItem("civiliansArr"));
var killerDeath = JSON.parse(sessionStorage.getItem("killerDeath")) || [];
var civiliansDeath = JSON.parse(sessionStorage.getItem("civiliansDeath")) || [];
var allDeath = JSON.parse(sessionStorage.getItem("allDeath")) || [];
console.log(killerArr.length)
console.log(killerDeath.length)
console.log(civiliansArr.length)
console.log(civiliansDeath.length)
console.log(allDeath);
console.log(day);
还是先读取所有的资料
if (killerArr.length == killerDeath.length) {
$(".picture").text("平民胜利");
$(".z2").text("太棒了！你知道么？在捉鬼游戏中有67%的平民取得游戏最终的胜利哦！");
} else {
$(".picture").text("杀手胜利");
$(".z2").text("太棒了！你知道么？在捉鬼游戏中有33%的杀手取得游戏最终的胜利哦！");
}
根据杀手死亡的人数判断那边赢了
$(".profession").text("杀手还有" + (killerArr.length - killerDeath.length) + "人" + "平民还有" + (civiliansArr.length - civiliansDeath.length) + "人");
写上双方还剩多少人
var y = 0;
for (let i = 0; i <= day - 1; i++) {
y += 2;
if (i < day - 1) {
$(".main").append(`
<div class="gameMessage">
<div class="firstLine">
<div class="firstLineLeft">第${i + 1}天</div>
<div class="firstLineRight">0小时07分</div>
</div>
<div class="secondLine">晚上：${allDeath[y - 2].number}号被杀手杀死，身份是${allDeath[y - 2].name}</div>
<div class="secondLine">白天：${allDeath[y - 1].number}号被投票投死，身份是${allDeath[y - 1].name}</div>
</div>`)
} else {
$(".main").append(`
<div class="gameMessage">
<div class="firstLine">
<div class="firstLineLeft">第${i + 1}天</div>
<div class="firstLineRight">0小时07分</div>
</div>
<div class="secondLine">晚上：${allDeath[y - 2].number}号被杀手投死，身份是${allDeath[y - 2].name}</div>
</div>`)
}
}
console.log(y);
根据经过了多少天就写入几个盒子记录流程
因为每天显示两条所以设置一个变量y每次加二
最后一天是奇数天就多加一个半天的记录来显示
明天再继续后续的任务
返回列表
评论