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

洗牌算法具体指的是什么？

0

1

通用

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

function Shuffle(a) {
    var length = a.length;
    for(var i = length - 1, rand;i >= 0; i--){
        rand = Math.floor(Math.random()*(i+1))
        var p = a[i];
        a[i] = a[rand];
        a[rand] = p ;  
    }
}

除了弄个盒子加margin-left设置底边框做成这样的样式还有其他方法吗。

0

1

背景图片属性边距定位属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.home {
    width: calc(100% - 1.65rem);
    height: 5rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-left: 1.65rem;
    border-bottom: 1px solid #e1e5e7;
}

如何用CSS实现响应式导航栏

0

1

轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

body {
    margin: 0;
    width: 100%;
    height: 100%;
    font-family: Arial, "Times New Roman", "Microsoft YaHei", SimSun, SimHei;
}


main {
    background-color: #fafafa;
}

   /* height: 50px;   神坑定高！下拉出不来   */
header {
}

.head-top {
    display: flex;
    justify-content: space-between;
}

/*客服热线*/
.tel {
    margin-top: 0.5%;
    margin-left: 2%;
    margin-top: 3px;
    font-size: 12px;
    color: #29B078;
}

/*微信微博qq图标*/
.head-img {
    margin-right: 2%;
}


.head-img img {
    width: 20px;
    margin-left: 8px;
}


/*加跳转链接*/
.head-text a {
    text-decoration: none;
    color: #ffffff;
}


.carousel-caption .text-4 a {
    text-decoration: none;
    color: #ffffff;
}


.navbar-nav .nav-item .nav-link {
    padding: 15px;
    border: 1px solid #26a26f;
}


.navbar-nav .nav-item .nav-link:hover {
    border-bottom: 1px solid white;
}



/*下面是轮播图的Boot4组件*/

/*这个类，组件里自带了absolute，我这里修改的是文字上移的位置*/
.carousel-caption {
    bottom: 32% !important;
}

/* Make the image fully responsive 让图片全屏展示*/
.carousel-inner img {
    width: 100%;
    height: 100%;
}

.carousel-inner .text {
    text-align: center;
    font-weight: bold;
    font-size: 2.5vw;
    color: #ffffff;
}

.carousel-inner .text-2 {
    text-align: center;
    font-weight: bold;
    font-size: 3vw;
    letter-spacing: 2px;
    color: #ffffff;
}

.carousel-inner .text-2 span {
    font-size: 4.5vw;
    letter-spacing: 2px;
    color: #ffffff;
}


.carousel-inner .text-3 {
    text-align: center;
    font-weight: bold;
    font-size: 6.5vw;
    font-family: MicrosoftJhengHei;
    color: #ffffff;
}


.carousel-inner .text-4 {
    text-align: center;
    font-size: 5.5vw;
    font-family: MicrosoftJhengHei;
    letter-spacing: 2px;
    color: #ffffff;
}



.container.intro {
    margin-bottom: 120px;
}


h3 {
    padding-bottom: 35px;
    text-align: center;
}

.link-h {
    padding-bottom: 5px;
    text-align: center;
}


main .row {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: justify;
}


.container.intro .col-lg-3.col-md-6 {
    display: flex;
    flex-direction: column;
    justify-items: center;
    padding: 29px;
}


.container.intro .col-lg-3.col-md-6.adjust {
    display: flex;
    flex-direction: column;
    justify-items: center;
    padding-left: 80px;
    border-left: 1px solid rgba(128, 128, 128, 0.15);
}


.container.intro .col-lg-3.col-md-6:hover {
    box-shadow: 1px 1px 2px 1px rgba(128, 128, 128, 0.15);
}


.container.intro .col-lg-3.col-md-6.adjust:hover {
    box-shadow: 1px 1px 2px 1px rgba(128, 128, 128, 0.15);
}


.container.intro .pic {
    text-align: center;
}


.container.intro .pic-2 {
    /* margin-top: 25px; */
    text-align: center;
}


.container.intro .pic-3 {
    margin-top: 15px;
    text-align: center;
}


.container.intro .count-people-adjust {
    margin-top: 40px;
}


.container.intro .pic img {
    width: 40px;
}

.container.intro .pic-2 img {
    width: 40px;
}


.container.intro .pic-3 img {
    width: 40px;
}

横向的元素在纵向排列的时候，怎么保证居中

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<div class="container">
    <div class="row">
        <div class="col-xs-12 col-sm-3 col-han">
            <div>
                <img src="media/rocket.png">
            </div>
            <h4>高效</h4>
            <p class="col-p">将五到七年的成长时间，缩短到一年到三年。</p>
        </div>
        <div class="col-xs-12 col-sm-3 col-han">
            <div>
                <img src="media/archive.png">
            </div>
            <h4>规范</h4>
            <p class="col-p">标准的实战教程，不会走弯路。</p>
        </div>
        <div class="col-xs-12 col-sm-3 col-han">
            <div>
                <img src="media/Shape-253.png">
            </div>
            <h4>人脉</h4>
            <p class="col-p">同班好友，同院学长，技术大师，入学就混入职脉圈，为以后铺平道路。</p>
        </div>

任务十流程图中制作黄线圆角的时候中间出现空白。

0

1

hover 属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

.process1,.process{
    display: inline-block;
    color: #cccccc;
    padding-top:38px;
    padding-bottom: 14px;
    text-align: center;
    font-size: 0;
    margin-left: -2px;
}

.process:hover .circle,.process:hover .line,.process:hover .line3{
    background-color:#ff7f02 ;
    z-index: 1;
}
.line{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.line3{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    z-index: 1;
}
.process:hover  span{color:#ff7f02 ;}
.circle1,.circle{
    display: inline-block;
    width: 24px;
    height: 24px;
    border-radius: 12px;
    background-color: #cccccc;
    color: white;
    font-size: 16px;
}
.line1,.line2,.line3,.line{
    display: inline-block;
    width: 60px;
    height: 5px;
    background-color: #cccccc;
    font-size: 18px;
}
.line1{
    border-bottom-left-radius: 5px;
    border-top-left-radius: 5px;
}
.line2{
    border-bottom-right-radius: 5px;
    border-top-right-radius: 5px;
    position: relative;
    z-index: 1;
}
.line1,.line2,.circle1{
    background-color:#ff7f02 ;
}

为什么利用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('请按顺序点击')
    }
})

怎样让轮播图下面的小圆点，当点击的时候切换到另一张图片时背景颜色能变成白色？

0

1

表单元素轮播

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

css：
/*轮播图*/
.carousel{
  position: relative;
  width: 100%;
  overflow: hidden;
}
.carousel-open:checked + .carousel-item {
  position: relative;
  opacity: 1;
}
.carousel-item {
  position: absolute;
  opacity: 0;
  transition: opacity 0.6s ease-out;
}
.carousel-control {
  background: rgba(0, 0, 0, 0.28);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  display: none;
  font-size: 40px;
  height: 40px;
  line-height: 35px;
  position: absolute;
  top: 50%;
  cursor: pointer;
  transform: translate(0, -50%);
  text-align: center;
  width: 40px;
  z-index: 10;
}
.carousel-control.prev {
  left: 2%;
}
.carousel-control.next {
  right: 2%;
}
#carousel-1:checked ~ .control-1,
#carousel-2:checked ~ .control-2,
#carousel-3:checked ~ .control-3,
#carousel-4:checked ~ .control-4,
#carousel-5:checked ~ .control-5{display: block}
.carousel-item img {
  display: block;
  height: auto;
  max-width: 100%;}
.instructions{
  position: absolute;
  margin:0 auto;
  bottom: 10px;
  left: 0;
  right: 0;
  width: 90px;
  li{display: inline-block}
}
.bullet{display: inline-block;
  width: 10px;
  height: 10px;
  margin: 1px;
  cursor: pointer;
  background-color: rgba(0,0,0,0);
  border: 1px solid #fff;
  border-radius: 10px;}

html：   <div class="carousel">
        <input class="carousel-open" type="radio" id="carousel-1" name="carousel" aria-hidden="true" hidden="" checked="checked">
        <div class="carousel-item">
            <img src="../image/2.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-2" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/3.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-3" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/4.png">
        </div>
        <input class="carousel-open" type="radio" id="carousel-4" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/5.jpg">
        </div>
        <input class="carousel-open" type="radio" id="carousel-5" name="carousel" aria-hidden="true" hidden="">
        <div class="carousel-item">
            <img src="../image/6.jpg">
        </div>
        <label for="carousel-5" class="carousel-control prev control-1">‹</label>
        <label for="carousel-2" class="carousel-control next control-1">›</label>
        <label for="carousel-1" class="carousel-control prev control-2">‹</label>
        <label for="carousel-3" class="carousel-control next control-2">›</label>
        <label for="carousel-2" class="carousel-control prev control-3">‹</label>
        <label for="carousel-4" class="carousel-control next control-3">›</label>
        <label for="carousel-3" class="carousel-control prev control-4">‹</label>
        <label for="carousel-5" class="carousel-control next control-4">›</label>
        <label for="carousel-4" class="carousel-control prev control-5">‹</label>
        <label for="carousel-1" class="carousel-control next control-5">›</label>
        <ol class="instructions">
            <li>
                <label for="carousel-1" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-2" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-3" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-4" class="bullet"></label>
            </li>
            <li>
                <label for="carousel-5" class="bullet"></label>
            </li>
        </ol>
    </div>

如何用css做一个导航栏

0

1

表单元素属性属性

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

                        <button class="menu">
                            <div class="across"></div>
                            <div class="acr"></div>
                            <div class="across"></div>
                        </button>
    .menu {
        display: flex;
        flex-direction: column;
        border-style: none;
        outline: none;
        border-radius: 4px;
        margin-right: 1.8rem;
        padding: 5px;
        background-color: rgb(238, 235, 235);
    }
    .across {
        width: 13px;
        border-bottom: 2px solid rgb(158, 157, 157);
    }
    .acr {
        margin: 2px 0;
        width: 13px;
        border-bottom: 2px solid rgb(158, 157, 157);
    }
    .menu:hover .gps {
        display: block;
    }

用fiexd定位

0

1

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

footer{
    position: fixed;
    width: 100%;
    bottom: 0;
    background-color: white;
}

不能自适应总是少一块

0

1

自适应

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

class="cursor-pointer"> 截图

class="cursor-pointer"> 代码

<!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">
    <link rel="stylesheet" type="text/css" href="task4.css">
    <title>Document</title>
</head>

<body>
    <div class="header">
        <p class="close">关闭</p>
        <p class="registe">注册</p>
        <p class="login">登录</p>
    </div>
    <form>
        <div class="user">
            <img src="images\iphone.png"/>
            <input type="text" placeholder="请输入手机号" name="tel" maxlength="11"/>
        </div>
        <div class="pw">
            <img src="images\locked 2.png"/>
            <input type="password" placeholder="请输入密码" name="password" />
        </div>
        <button class="login1" type="submit">登 录</button>
    </form>
    <button class="forget" type="button">忘记密码?</button>
</body>

</html>