发表于： 2019-12-18 21:42:57
1 1376
今日完成:
法官页面,用flex行不通,因为根据value的值显示个数,排列收到影响,所以用float
less
.main {
overflow: hidden; //触发bfc,浮动用的是overflow除了visible以外的值（hidden、auto、scroll）
margin-bottom: 80px;//设置main的目的,底部整体上移,不被底部绝对定位模块遮盖
.main-box {
float: left;
margin-left: 10vw; //保证平均分配外边距
margin-top: 10vw; //上下两排的间距,为了不影响下方将要设置的元素的布局,所以边距向上设置
width: 20vw; //设置vw为了自适应的同事,能让高度对于宽度,高度也可以取vw
height: 20vw; //为了高度始终与宽度相等
border: 5px solid white; //边框
box-sizing: border-box; //边框向内,为了不影响外边距,排列
.main-box-t {//设置每个盒子上半部分身份模块的的背景颜色,文字样式
.flex;
.text-style(@c: black);
height: 70%;
background: @bg-2;
}
.main-box-b {//设置每个盒子下半部分身份序号模块的的背景颜色,文字样式
.flex;
.text-style;
height: 30%;
background: #83b09a;
}
}
}
.footer {//设置整个底部,固定在底部,重新设置宽度,背景颜色
position: fixed;
background: @bg-1;
bottom: 0px;
width: 100%;
.footer-p {//设置按钮样式,及其中的文本样式
.flex;
height: 40px;
width: 80%;
font-size: 20px;
color: white;
background: @p-2;
margin: 10px auto;
}
}
先设置18个再说怎么做接下来的
显示:
遇到问题:
1.已经设置:
box-sizing: border-box; //边框向内,为了不影响外边距,排列
显示:还是没有对齐,且没没有对齐的方式还不一样
解决:待解决
2.背景颜色与边框间有间隙
解决:待解决
然后思考根据传过来的数组元素个数显示相应的模块
开始是想,挨个判断判断大于数组.length隐藏,然后觉得不如全部隐藏然后判断显示,并且好像不用挨个判断,好像用循环语句就可以
做法,先在less中设置
.main-box {
float: left;
display: none;//全部隐藏
...
然后设置js代码
var box=document.getElementsByClassName("main-box");//用类名绑定html中的指定元素
for (var a=0;a<cc4.length;a++){//cc4是传递过来的数组,索引值从0开始计算,数组元素个数从1开始计算,
//所以循环结束条件a<cc4.length正合适,不需要额外的计算表达式
box[a].style.display="block";
//循环语句含义:为box数组中,所有小于数组cc4元素个数的索引值所代表的元素添加样式display:block(显示)
}
总结:
1.调用数组中某个元荤,或者为某个元素添加属性,是box[#],而不是box(#),不管#写什么,都会被报错,显示函数未定义(识别为函数)
2.添加样式,在js中"="代表赋值,box[a].style.display=block;block不带引号,会报错显示block未定义
然后,再想办法,让显示出来的模块按照传递过来的数组显示正确的身份和序号
//身份
var boxt = document.getElementsByClassName("main-box-t"); //用类名绑定身份输出
for (var a = 0; a < cc4.length; a++) {
if (cc4[a] == 0) {//判断身份
boxt[a].innerHTML = "杀手"//对应html元素输出身份
} else {
boxt[a].innerHTML = "平民"
}
};
//序号
var boxb = document.getElementsByClassName("main-box-b"); //用类名绑定序号
for (var a = 0; a < cc4.length; a++) {
boxb[a].innerHTML = (a + 1) + "号" //因为序号从1开始,索引值从0开始,所以索引值+1
};
显示:
发现他们可以储存在同一个执行代码内,简化代码
//组合上述三个函数
var box = document.getElementsByClassName("main-box");
var boxt = document.getElementsByClassName("main-box-t");
var boxb = document.getElementsByClassName("main-box-b");
for (var a = 0; a < cc4.length; a++) {
box[a].style.display = "block";
boxb[a].innerHTML = (a + 1) + "号"
if (cc4[a] == 0) {//判断身份
boxt[a].innerHTML = "杀手"//对应html元素输出身份
} else {
boxt[a].innerHTML = "平民"
}
}
ps:这里不用在意"block"代码的顺序,是因为原本代码就是设置好的,先显示模块再改变内容和先改变内容再显示模块显示效果一样的
然后设置点击"开始游戏"跳转下个页面,法官页面完成
先把法官日志的静态页面制作出来
如下显示:
遇到问题:
学着现在的,发现之前学的有点记不清了,遇到的问题,好像以前遇到过,慢慢微调吧
收获:
1.逻辑上的问题,如果想不通,就把逻辑拆开来实现,还是有效果的
2.使用数组绑定html元素,改变属性的注意事项
明日计划:继续js2-4
返回列表
评论