【法官查看界面如何实现盒子编号、玩家身份和分配身份后的状态保持一致 _节点操作 _控制流程语句 _事件】

法官查看界面如何实现盒子编号、玩家身份和分配身份后的状态保持一致

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

节点操作控制流程语句事件

详细描述

截图

代码

html:
<div class="main-box">
   <!--<div class="content-box">-->
            <!--<div class="content-top">-->
                <!--<div class="career"></div>-->
                <!--<div class="number"></div>-->
            <!--</div>-->
        <!--<div class="content-bottom"></div>-->
    <!--</div>-->
</div>
CSS：
.main-box {
    width: 100%;
    margin-top: .2rem;
    display: flex;
    flex-wrap: wrap;
}
.content-box {
    width: 30%;
    height: 1.9rem;
    margin: 1.5% 1.66% 0 1.66%;
}
.content-top {
    width: 100%;
    height: 1.36rem;
}
.career {
    width: 100%;
    height: 1.0rem;
    font-size: .3rem;
    color: #565656;
    background-color: #F5C97B;
    box-sizing: border-box;
    border: 2px solid #FFF;
    border-bottom: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.number {
    width: 100%;
    height: .36rem;
    font-size: .22rem;
    color: #FFF;
    background-color: #83B09A;
    box-sizing: border-box;
    border: 2px solid #FFF;
    border-top: none;
    display: flex;
    justify-content: center;
    align-items: center;
}
.content-bottom {
    width: 100%;
    height: .3rem;
    padding-top: .2rem;
    background-image: url(../image/img1.png);
    background-repeat: no-repeat;
    background-size: .3rem .3rem;
    background-position: center center;
    visibility: hidden;
}
JS:
var player = JSON.parse(sessionStorage.getItem('player'));//取出总玩家人数数组
 for (var i=0; i<player.length; i++){//遍历数组，有几个玩家就循环几次，把所有玩家都遍历出来
        var num = i + 1;//每个角色对应的号码
        var inBox = '<div class=\"content-box\">\n'+//var个变量存储写进文档的标签代码，记住要转义字符
            '<div class=\"content-top\">\n'+
            '<div class=\"career\">\n'+ player[i] +
            '</div>\n'+
            '<div class=\"number\">\n'+ num +
            '</div>\n'+
            '</div>\n'+
            '<div class=\"content-bottom\">\n'+
            '</div>\n'+
            '</div>';
        $('.main-box').append(inBox);//通过append将盒子一个一个的往文档里面装
        }

编辑于2024-05-13