发表于： 2020-09-11 23:54:59
1 1148
今天完成的事情：
设置好页面1，页面2的html.css部分
<script>
// 获取传递玩家身份的数组allnum
var allnum = localStorage.getItem("allnum");
// 将字符串转换为数组,获取杀手，平民
var arr = allnum.split(",")
// 获取btn按钮
var btn = document.getElementById("btn");
// 查看身份数组
console.log(allnum)
// 查看身份数组的元素
console.log(arr[0])
// 查看数组的长度
console.log(arr.length);
// 获取mian节点
var main = document.querySelector("main")
window.onload = function () {
//添加div
for (index = 0; index < arr.length; index++) {
// var boxs = document.createElement("div");//添加子节点div
// boxs.className = "boxs";//获取class为boxs
// main.appendChild(boxs);//把boxs添加到main中
var boxs = document.getElementById("boxs")//获取boxs的节点
var box = document.createElement("div");//添加boxs的子节点div
box.className = "box1";//获取css属性
boxs.appendChild(box);//把box添加到boxs中
var p1 = document.createElement("p");//添加文字节点
p1.className = "one";
box.appendChild(p1);
p1.innerHTML = arr[index];//添加玩家信息
var p2 = document.createElement("p");
p2.className = "two";
box.appendChild(p2);
p2.innerHTML = (index + 1) + "号";//玩家号数
var box2 = document.createElement("div");//添加节点的子节点
box2.className = "box2";
box.appendChild(box2);
var img = document.createElement("img");//添加图片节点
img.className = "img";
img.src = "./images/src/发言讨论结束，投票_04.png"//添加图组;
box2.appendChild(img);
console.log(index);
console.log(arr[index]);
}
}
btn.onclick=function(){
}
</script>
/* header */
.nav-hand {
height: 7rem;
line-height: 7rem;
display: flex;
justify-content: space-between;
align-items: center;
background-color: #29bde0;
color: white;
font-size: 3.4rem;
padding: 0 1vw;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
main {
margin: 2rem 2rem
}
.big-box {
border: 1px solid #c9c9c9;
background-color: #f7f7f7;
}
.day {
text-align: center;
width: 100%;
height: 8.8rem;
line-height: 8.8rem;
font-size: 3rem;
border-bottom: 1px solid #c9c9c9;
color: #29bde0;
}
.process {
position: relative;
width: 100%;
display: flex;
/* justify-content: space-between; */
/* align-items: center; */
color: white;
padding-top: 2rem;
}
.img {
width: 20%;
display: flex;
flex-direction: column;
align-items: center;
}
.img img {
padding: 1rem 0;
}
.img::before{
position: absolute;
top: 0;
content: "";
background-color: blue;
width: 15px;
height: 7px;
border-radius: 0 0px 7px 7px;
line-height: 7px;
}
.img::after {
position: absolute;
top: 0;
content: "";
border: 1px solid red;
height: 100%;
width: 1px;
}
.word {
width: 60%;
text-align: center;
}
.word div {
position: relative;
line-height: 6rem;
margin: 1rem 0;
font-size: 3rem;
background-color: #24a7c6;
}
.word div::after {
content: '';
position: absolute;
top: 14px;
left: -19px;
border-top: 15px solid transparent;
border-right: 19px solid red;
border-bottom: 19px solid transparent;
}
footer {
width: 100%;
position: fixed;
bottom: 0;
height: 10vw;
background-color: rgba(36, 167, 198, .5);
display: flex;
justify-content: space-between;
align-items: center;
}
.btn1,
.btn2 {
width: 40%;
margin: 0 5vw;
height: 60%;
border: none;
border-radius: 10px;
color: white;
font-size: 3vw;
}
.btn1 {
background-color: #f66f6f;
}
.btn2 {
background-color: #fbb425;
}
</style>
</head>
<body>
<header>
<div class="nav-hand">
<img src="./images/第二天_03.png" class="box-one">
<div>法官台本</div>
<img src="./images/src/发言讨论结束，投票_02.png" class="box-three">
</div>
</header>
<main>
<div class="big-box">
<div class="day">第一天</div>
<div class="process-box">
<div class="process">
<div class="img">
<img src="./images/流程(第一天)_03.png" alt="">
<img src="./images/流程(第一天)_06.png" alt="">
</div>
<div class="word">
<div>杀手杀人</div>
<div>亡灵发表遗言</div>
<div>玩家依次发言</div>
<div>投票</div>
</div>
</div>
</div>
</div>
</main>
<footer>
<button class="btn1">结束游戏</button>
<button class="btn2">法官日记</button>
</footer>
返回列表
评论