IT修真院·坑乎 | Java(后端),CSS(前端),JavaScript(前端),PM(产品经理),UI(交互设计),QA(测试),Android(安卓APP),iOS(苹果APP),OP(运维),Python(后端)日常在线问答学习平台

nginx配置不懂阿，task1.html是什么文件找不到

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 图片

class="cursor-pointer"> 文本

onclick重复点击问题

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

// 随机一个颜色
function bG1(){
    var r = Math.floor(Math.random()*256);
    var g = Math.floor(Math.random()*256);
    var b = Math.floor(Math.random()*256);
    if("rgb(" + r + "," + g + "," + b + ")"=="rgb(251, 180, 53)") {
        return bG1();
    }
    else{
        return "rgb(" + r + ","+ g + "," + b + ")";
    }
}
// 随机三个数字    
function divNumenr1(){
    n1 = Math.floor(Math.random()*9);
    return n1;
}
function divNumenr2(){
    n2 = Math.floor(Math.random()*9);
    if(n1==n2) {
        return divNumenr2();
    }
    else{
        return n2;
    }
}
function divNumenr3(){
    n3 = Math.floor(Math.random()*9);
    if(n2==n3) {
        return divNumenr3();
    }
    else if(n1==n3) {
        return divNumenr3();
    }
    else{
        return n3;
    }
}
// 定时器

function divLoop(){
        divStart = setInterval(divBN,1000);

}
// 停止定时器
function divStop(){
    clearInterval(divStart);
    var i=0;
    while(i<9){
        document.getElementsByTagName("div")[i].style.background = "rgb(251, 180, 53)";
        i++;
    }
}
function divBN() {
    for(var i=0; i<9; i++) {
        document.getElementsByTagName("div")[i].style.background = "rgb(251, 180, 53)";
    }
    document.getElementsByTagName("div")[divNumenr1()].style.background = bG1();
    document.getElementsByTagName("div")[divNumenr2()].style.background = bG1();
    document.getElementsByTagName("div")[divNumenr3()].style.background = bG1();
}

任务13的侧边栏按钮如何做，代码更省更规范；

0

1

通用

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

   <header class="header-box">

        <input type="checkbox" id="sidemenu">

        <aside class="g-position">
            <ul class="sideul">
                <li>
                    <img src="../image/side-icon.png">公告<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">设置<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">帮助<img src="../image/side-back.png">
                </li>
                <li>
                    <img src="../image/side-icon.png">关于<img src="../image/side-back.png">
                </li>
            </ul>
        </aside>
        <label for='sidemenu'></label>
        <!-- 侧滑按钮图片 -->
        <img src="../image/侧滑.png" class="cehua-botton g-position">
    </header>

用了bootstrap栅格为什么在1080px以上就会向左边靠拢？

0

1

响应式媒体查询

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="row">
                <div class="excellent">优秀学员展示</div>
                <div class="col-xs-12 col-sm-12 col-md-6 col-lg-3 boxs-three">
                    <div class="picture-box">
                        <div class="pictures-one"></div>
                        <p class="picture-text">技术顾问：罗大佑</p>
                        <p class="picture-texts">
                            百度技术总监：互联网基础服务领域，从事虚拟主机、云服务器、域名。曾任新网高级技术经理，负责技术研发、团队管理和建设。
                        </p>
                    </div>

如何将 footer 保持在底部？

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

html{
    height: 100%;
}
body{
    display: flex;
    flex-direction: column;
    height: 100%;
}
.header{
    flex: 0 0 auto;
}
.main{
    flex: 1 0 auto;
}
.footer{
    flex: 0 0 auto;
}

为什么利用for循环遍历生成死亡信息时，会出现重复？

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

//结束游戏按钮，直接跳转到玩家配比页面
function over() {
    var gameOver = confirm("确认结束游戏吗？")
    if (gameOver == true) {
        sessionStorage.clear()
        window.location.href = '../html/player-ratio.html'
    }

}

var obj = JSON.parse(sessionStorage.getItem("obj"))
// var click = sessionStorage.getItem("click")
var deathObj = JSON.parse(sessionStorage.getItem("deathObj"))
var voteObj = JSON.parse(sessionStorage.getItem("voteObj"))
console.log(deathObj)
console.log(voteObj)
var day = sessionStorage.getItem('day');

for (i = 1; i <= day; i++) {
    $('.process').append('<button class="btnDay"></button><div class="flow"><div class="triangle"></div><p class="killing">杀手杀人</p><p class="deathKill"></p><p class="speaking">亡灵发表遗言</p><p class="discuss">玩家依次发言</p><p class="vote">全民投票</p><p class="deathVote"></p></div>')
    $('.btnDay').eq(i - 1).append('第' + i + '天');
    $('.flow').hide();
    $('.flow').eq(i - 1).show();
    // console.log(day)
    // console.log(i)
}
if (JSON.parse(sessionStorage.getItem('deathObj'))) {
    for (var i = 1; i <= day; i++) {
        $('.deathKill').eq(day - 1).append(deathObj[0].numb + "号被杀死，他的真实身份是" + deathObj[0].name)
    }
}
if (JSON.parse(sessionStorage.getItem('voteObj'))) {
    for (var i = 1; i <= day; i++) {
        $('.deathVote').eq(day - 1).append(voteObj[0].numb + "号被放逐，他的真实身份是" + voteObj[0].name)
    }
}


for (var i = 1; i < day; i++) {
    $('.killing').eq(i - 1).css("background-color", "gray")
    $('.speaking').eq(i - 1).css("background-color", "gray")
    $('.discuss').eq(i - 1).css("background-color", "gray")
    $('.vote').eq(i - 1).css("background-color", "gray")
}
$('.btnDay').click(function () {
    var dayClick = $('.btnDay').index(this)
    $('.flow').eq(dayClick).toggle()
})
if (JSON.parse(sessionStorage.getItem('kilClick'))) {
    kilClick = JSON.parse(sessionStorage.getItem('kilClick'))
} else {
    kilClick = 2
    // console.log(kilClick)
}
// console.log( JSON.parse(sessionStorage.getItem('kilClick')))
if (kilClick == 1) {
    for (var i = 0; i < day; i++) {
        $('.killing').eq(i).css("background-color", "gray")
    }
}
if (JSON.parse(sessionStorage.getItem('flow'))) {
    flow = JSON.parse(sessionStorage.getItem('flow'))
} else {
    flow = 0
}

$('.killing').eq(day - 1).click(function () {
    var killing = 1
    sessionStorage.setItem("killing", killing)
    if (flow == 0) {
        flow = 0
        sessionStorage.setItem('flow', flow)
        window.location.href = '../html/killing.html'
    } else {
        alert(' 请按顺序点击')
    }
})
$('.speaking').eq(day - 1).click(function () {
    if (JSON.parse(sessionStorage.getItem('flow')) == 1) {
        flow = 2
        sessionStorage.setItem('flow', flow)
        alert('请亡灵发表遗言')
        $('.speaking').css("background-color", "gray")
    } else {
        alert('请按顺序点击')
    }
})
$('.discuss').eq(day - 1).click(function () {
    if (JSON.parse(sessionStorage.getItem('flow')) == 2) {
        flow = 3
        sessionStorage.setItem('flow', flow)
        alert('请玩家依次发言')
        $('.discuss').css("background-color", "gray")
    } else {
        alert('请按顺序点击')
    }
})
$('.vote').eq(day - 1).click(function () {
    sessionStorage.removeItem('killing')
    if (JSON.parse(sessionStorage.getItem('flow')) == 3) {
        flow = 0
        sessionStorage.setItem('flow', flow)
        var vote = 1
        sessionStorage.setItem("vote", vote)
        sessionStorage.setItem("day", day)
        window.location.href = '../html/killing.html'
    } else {
        alert('请按顺序点击')
    }
})

label标签内添加button标签，点击label范围默认点击button

0

1

导航栏

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<label for="nav" class="nav-btn">
                    <button>
                            <div></div>
                            <div></div>
                            <div></div>
                    </button>
                </label>

动画效果的问题

0

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.table-col {
    position: relative;
    &:hover .animation-table {
        display: block;
        @keyframes mytable {
            0% {transform: rotate(0);}
            100% {transform: rotate(360deg);}
        }
    }
    &:hover .animation-table2 {
        display: block;
        @keyframes mytable2 {
            0% {transform: rotatey(0);}
            100% {transform: rotatey(360deg);}
        }
    }
    &:hover .animation-table3 {
        display: block;
        @keyframes mytable3 {
            0% {height: 0;}
            100% {height: calc(100% - 48px);}
        }
    }
}
.table {
    table-layout: fixed;
    margin-top: 48px;
    box-shadow: 0 0 3px #D0D6D9;
    border-radius: 3%;
    width: 100%;
    background: #FFFFFF;
}
.animation-table {
    display: none;
    position: absolute;
    left: 15px;
    top: 48px;
    z-index: 1;
    border-radius: 3%;
    width: calc(100% - 30px);
    height: calc(100% - 48px);
    background: rgba(51, 51, 51, .8);
    animation: mytable 1s;
    .at-font1 {
        margin: 40px 0;
        font-size: 14px;
        text-align: center;
        color: rgba(255, 255, 255, 1);
    }
    .at-font2 {
        @extend .at-font1;
        margin: 0 auto 40px;
        width: 80%;
        line-height: 22px;
        text-align: justify;
    }
}
.animation-table2 {
    @extend.animation-table;
    animation: mytable2 1s;
}
.animation-table3 {
    @extend.animation-table;
    animation: mytable3 1s;
}

于前端开发webstorm软件的问题

1

代码管理 git

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

做出hover的效果必须用到z-index两者之间的关系？z-inde值大小区别

1

class="cursor-pointer"> 详细描述

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

main p:hover {
    background: #fff;
    z-index: 1;
}