发表于： 2020-05-31 23:07:58
1 2017
今天完成的事情：今天继续写了后续的内容以及理了一下逻辑
明天计划的事情：继续写后续的页面
遇到的问题：实际操作还是不太熟练需要多练习
收获：今天写了后续的杀人以及投票的页面
、
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="f-4.css">
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
</head>
<body>
<div class="d1">
<img src="./images/02.png" alt="" class="header_left">
<span class="z1">投票</span>
<img src="./images/03.png" alt="" class="header_right">
</div>
<div class="d2">
<span class="z2">发言讨论结束，请大家投票</span>
<img src="./images/04.png" alt="" class="t1">
<audio src="./财富自由.mp3" controls=""></audio>
</div>
<div class="d3">
<span class="z3">点击得票数最多人的头像</span>
<div class="sjx"></div>
</div>
<div class="container">
</div>
<div class="db">
<div class="db1">
投死
</div>
</div>
<script src="./f-4.js"></script>
</body>
</html>
css代码
.d1{
background-color: #29bde0;
display: flex;
justify-content: space-between;
height: 34px;
align-items: center;
}
.z1{
font-size: 15px;
color: white;
}
.d2{
display: flex;
justify-content: space-between;
background-color: #b9e9f5;
height: 41px;
align-items: center;
padding-left: 7vw;
position: relative;
}
audio{
transform: rotate(180deg);
opacity: 0;
}
.t1{
position: absolute;
right: 0;
}
.z2{
white-space: nowrap;
font-size: 12px;
}
.d3{
height: 36px;
background-color: #29bde0;
position: relative;
}
.sjx{
width: 0;
height: 0;
border-top: 5px solid #b9e9f5;
border-right: 3px solid transparent;
border-left: 3px solid transparent;
position: absolute;
top: 0;
left: 10vw;
}
.z3{
line-height: 36px;
padding-left: 10vw;
font-size: 11px;
color: white;
}
.container{
background-color: #29bde0;
}
.db{
height: 95px;
background: #29bde0;
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: 21px 11vw 30px 12vw;
}
.db1{
height: 43px;
background-color: #fbb435;
text-align: center;
line-height: 43px;
color: white;
}
body{
margin-bottom: 95px;
background: #29bde0;
}
.container {
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
margin-bottom: 95px;
}
.container .box {
float: left;
width: 21.2vw;
height: 32.8vw;
margin: 0 5.5vw;
}
.container .message {
display: flex;
flex-direction: column;
height: 21.5vw;
border: 0.7vw solid white;
}
.container .name {
display: flex;
align-items: center;
justify-content: center;
flex-basis: 78%;
height: 15.4vw;
font-size: 4.2vw;
background-color: #f5c97b;
}
.number {
font-size: 3.2vw;
color: white;
background-color: #83b09a;
text-align: center;
flex-basis: 22%;
}
.opition {
display: flex;
justify-content: center;
align-items: center;
height: 11vw;
visibility: hidden;
}
.opition img {
width: 4.7vw;
height: 4.7vw;
}
js代码
var getArr = JSON.parse(sessionStorage.getItem("record"));
var index = JSON.parse(sessionStorage.getItem("index"));
var life = JSON.parse(sessionStorage.getItem("life"));
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")) || [];
var day = JSON.parse(sessionStorage.getItem("day"))|| 1;
var step = sessionStorage.getItem("step") || 1;
console.log(index);
console.log(life);
console.log(getArr);
console.log(killerArr);
console.log(civiliansArr);
console.log(killerDeath);
console.log(civiliansDeath);
console.log(allDeath);
console.log(day);
var a
$(".header_left").click(function () {
window.location.href = "./f-3.html"
});
$(".header_right").click(function () {
sessionStorage.clear();
window.location.href = "./f.html"
});
for (i = 0; i < getArr.length; i++) {//遍历数据加入小格子
$(".container").append(`
<div class="box" data-index = "${i}">
<div class="message">
<div class="name">${getArr[i]}</div>
<div class="number">${i+1}号</div>
</div>
<div class="opition">
<img src="./im2/4.png" class="icon">
</div>
</div>
`)//模板字符串
}
//通过奇偶数来判断时杀人还是投票页面，仅改变文字，不改变任何功能
if (index % 2 == 0) {
$(".z1").text("投死")
$(".db1").text("点击投票")
} else {
$(".z1").text("开始杀人！")
$(".db1").text("点击杀人！")
$(".z2").text("杀人时间到")
}
这一页是最麻烦的部分
var getArr = JSON.parse(sessionStorage.getItem("record"));
var index = JSON.parse(sessionStorage.getItem("index"));
var life = JSON.parse(sessionStorage.getItem("life"));
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")) || [];
var day = JSON.parse(sessionStorage.getItem("day"))|| 1;
var step = sessionStorage.getItem("step") || 1;
console.log(index);
console.log(life);
console.log(getArr);
console.log(killerArr);
console.log(civiliansArr);
console.log(killerDeath);
console.log(civiliansDeath);
console.log(allDeath);
console.log(day);
总之先获取前面存下来的数据
$(".header_left").click(function () {
window.location.href = "./f-3.html"
});
$(".header_right").click(function () {
sessionStorage.clear();
window.location.href = "./f.html"
});
头部的左右部分加上页面跳转
for (i = 0; i < getArr.length; i++) {//遍历数据加入小格子
$(".container").append(`
<div class="box" data-index = "${i}">
<div class="message">
<div class="name">${getArr[i]}</div>
<div class="number">${i+1}号</div>
</div>
<div class="opition">
<img src="./im2/4.png" class="icon">
</div>
</div>
`)//模板字符串
}
同样的用模板字符串加上小格子，但是注意需要给盒子加一个data-index以备后用
if (index % 2 == 0) {
$(".z1").text("投死")
$(".db1").text("点击投票")
} else {
$(".z1").text("开始杀人！")
$(".db1").text("点击杀人！")
$(".z2").text("杀人时间到")
}
通过前面页面设定的index的值判断是投票还是杀手杀人用来改变页面上的文字，靠奇偶数来判断
剩下的明天继续
返回列表
评论