主页 / user-349482

Tempest's questions

Martin Hope
Tempest
Asked: 2022-08-25 02:15:43 +0000 UTC
  • -3

给定一个数字数组，例如：[10, 20, 30, 50, 235, 3000]。仅显示数组中以数字 1、2 或 5 开头的那些数字。

找到了这个解决方案

let arr = [10, 20, 30, 50, 235, 3000];
 
console.log(arr.filter(num => ['1','2','5'].includes(num.toString()[0])))

我不太明白这段代码是如何工作的。num.toString() 的用途是什么，它可以用 startWith 来完成，还是这个方法只适用于字符串？

javascript
Martin Hope
Tempest
Asked: 2022-08-17 03:30:07 +0000 UTC
  • 1

有这样一个任务：编写一个循环，提示输入一个大于100的数字。如果访问者输入了不同的数字，请他再次输入，以此类推。

循环应该询问一个数字，直到访问者输入一个大于 100 的数字或按下取消 (ESC) 按钮。

我写了这段代码

outer: while (true) {
  let value = +prompt('Введите число больше 100?', 0);
  
  if (value < 100) {
    continue outer;
  } else if (!value || value > 100) {
    break outer;
  }
}

为什么取消的时候还是提示？

javascript
Martin Hope
Tempest
Asked: 2021-11-25 00:07:13 +0000 UTC
  • 0

很明显，当单击 ul.tabs__caption 时会触发一个事件，接下来会发生什么？

(function($) {
$(function() {
  
  $('ul.tabs__caption').on('click', 'li:not(.active)', function() {
    $(this)
      .addClass('active').siblings().removeClass('active')
      .closest('div.tabs').find('div.tabs__content').removeClass('active').eq($(this).index()).addClass('active');
  });
  
});
})(jQuery);

javascript
Martin Hope
Tempest
Asked: 2021-11-14 21:23:02 +0000 UTC
  • 0

有一个灰泥块占据了屏幕宽度的 50%。在这个块里面是 owl-carousel 块，其中包含带有照片的滑块块。每个块滑块都是一个带有 img 类的块，其内部是一个带有 pbg 类的块，它有一个背景图像。为img和pbg块设置样式时，得到一个高宽相同的正方形，但是里面的图片不完全适合滑块块，被截断了。如何确保任何尺寸的图片均匀地位于滑块中并且不会同时被切断？也就是说，简单地说，有一个块占据了屏幕的一半，这个块是方形的，里面有一个猫头鹰旋转木马，我希望任何图片都适合这个方形块而不裁剪

.stucco-gal {
    width: 50%;
 }

 .img {
   overflow: hidden;
   position: relative;
   width: 100%;
   padding-bottom: 100%; 
   
 }

 .pbg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-repeat: no-repeat
 }
<div class="stucco-gal">
                                        <div class="owl-carousel">
                                            <div class="img">
                                                <div style="background-image: url(img/bg-5.jpg);" class="pbg"></div>
                                            </div>

                                            <div class="img">
                                                <div style="background-image: url(img/bg-6.jpg);" class="pbg"></div>
                                            </div>

                                            <div class="img">
                                                <div style="background-image: url(img/bg-7.jpg);" class="pbg"></div>
                                            </div>

                                            <div class="img">
                                                <div style="background-image: url(img/bg-8.jpg);" class="pbg"></div>
                                            </div>
                                        </div>
</div>

html
Martin Hope
Tempest
Asked: 2020-10-01 07:33:16 +0000 UTC
  • 1

我写风格

.active {
  color: red;
}

并写入js文件

$('a').on('click', function(event) {
     $(this).addClass('active');
     $('a').removeClass('active');
});

最后，结果应该是这样的——当你点击一个链接时，它会变成活动的并变成红色，当你点击另一个链接时，已经按下的那个应该变成红色，而前一个应该会熄灭。但最后，只有当 $('a').removeClass('active') 行被删除，然后链接至少在点击时开始燃烧时，这一切才有效，但为什么会发生这种情况？为什么 .removeClass 根本不起作用？怎么做才对？

网站本身 tempest.beget.tech

jquery
Martin Hope
Tempest
Asked: 2020-09-05 09:49:12 +0000 UTC
  • 1

我有 4 个方块，想将每个方块放在 flex 容器的每个角落。我决定通过justify-self属性来做到这一点，当我为它设置div.one参数justify-self: start;时，没有任何反应。

.flex {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: row;
  font-size: 30px;
  color: #fff;
  outline: 1px solid red;
  height: 800px;
}

.one {
  width: 200px;
  height: 200px;
  background-color: red;
  align-self: flex-start;
  justify-self: start;
}

.two {
  width: 200px;
  height: 200px;
  background-color: blue;
  align-self: flex-end;
}

.three {
  width: 200px;
  height: 200px;
  background-color: black;
  align-self: flex-start;
}

.four {
  width: 200px;
  height: 200px;
  background-color: green;
  align-self: flex-end;
}
<div class="flex">
  <div class="one">1</div>
  <div class="two">2</div>
  <div class="three">3</div>
  <div class="four">4</div>
</div>

是否可以使用网格将所有<div>-s 放置在角落？

（Codepen 上的代码）

html
Martin Hope
Tempest
Asked: 2020-09-02 06:05:45 +0000 UTC
  • 0

有一个响应式 .mobmenu 菜单和一个 .feedback.openform 反馈按钮。如何让当你点击汉堡时，深色背景的菜单会覆盖反馈按钮，使其无法点击？相反，点击反馈表时，无法调出自适应菜单。我有点管理菜单，但这里是如何将反馈完全带到前台，同时让带有汉堡包的标题向后移动？[j][1]

在此处输入图像描述 在此处输入图像描述

$(".mobmenu").click(function(event) {
        $(".menu").toggleClass('show');
        $(this).toggleClass('open');
        $(".bg").toggleClass('show');
    });

    $(".feedback").click(function(e) { 
        $(".bg").toggleClass('show');  
        $(".bgform").toggleClass('show'); 
        $(this).toggleClass('open'); 
    });
html, body {
    width: 100%;
    height: 100%;
    font-family: 'Montserrat', sans-serif;
    line-height: 1.5;
    font-weight: 300;
}

h1, h2 {
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 5px!important;
    
}


a {
    color:#202020;
    text-decoration: none;
}

.wrapper {
    max-width: 1400px;
    width: 100% ;
    margin: 0 auto 0 auto;
    padding: 0 60px 0 60px;
    box-sizing: border-box;
}

.header {
    background-color: black;
    padding: 10px 0;
    margin-bottom: 60px;
}

.menu {
    margin-left: 60px;
}

.menu ul li {
    display: inline-block;
}


.menu ul li:last-child {
    margin-right: 0;
}

.menu ul li a {
    color: #fff;
    margin-right: 20px;
}

.header .logo {
    display: block;
    width: 180px;
}

.header .wrapper {
    display: flex;
    align-items: center;
    
}

.sidebar {
    width: 300px;
    height: 300px;
    float: left;
    background-color: grey;
    margin-bottom: 60px;
}

.sidebar.single {
    height: auto;
    background: 0;
}
    

.content {
    margin-left: 340px;
    margin-bottom: 60px;
}

.submenu ul li {
    display: inline-block;
}

.submenu {
    margin-bottom: 20px;
}

.submenu ul li a {
    color: #CCC;
    margin-right: 10px;
}

.content p {
    text-align: justify;
    margin-bottom: 20px;
}

.catalog {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin-left: -30px;
    margin-right: -30px;
}

.catalog .item {
    height: 220px;
    margin: 30px;
    position: relative;
    line-height: 1;
    cursor: pointer;
    transition: filter 0.3s;
}

.catalog.grid .item {
    width: calc(100%/3 - 60px);
}

.catalog.list .item {
    display: flex;
    height: auto;
    align-items: center;
    width: 100% ;

}

.catalog.list .col {
    position: relative;
    width: 50%;
}

.catalog.list .item img {
    width: 50%;
    margin-bottom: 0;
    margin-right: 40px!important;
}



.catalog.list .title {
    margin-bottom: 40px;
}



.catalog .item img {
    width: 100%;
    margin-bottom: 20px;
    filter: grayscale(100);
}

.catalog .item:hover img {
    filter: grayscale(0);
    transition: filter 0.3s;
}


.catalog.list .title {
    margin-bottom: 40px;
}

.catalog .item .desc, .catalog .item .price {
    position: absolute;
    bottom: 0;
}

.catalog .item .desc {
    left: 0;
}

.catalog .item .price {
    font-size: 20px;
    font-weight: 500;
    right: 0;
}

.catalog .item .desc {
    font-size: 15px;
}

.catalog .item span {
    display: block;
}

.catalog .item .title {
    font-size: 20px;
    font-weight: 500;
}

.catalog .item:hover .title {
    color: orange;
    transition: color 0.3s;
}

.icons {
    text-align: right;

}

.icons i {
    font-size: 30px;
    margin-right: 15px;
    opacity: 0.5;
    cursor: pointer;
}

.icons i:last-child {
    margin-right: 0;
}

.icons i.active {
    opacity: 1;
}

.mobmenu {
    width: 100%;
    display: none;
    color: #fff;
    text-align: right;
    z-index: 999;
    cursor: pointer;
}

.fas.fa-times {
    display: none;
}

.open .fas.fa-bars {
    display: none;
}

.open .fas.fa-times {
    display: block;
}



.showroom {
    text-align: center;
    background: url(../img/showroom.jpg) center no-repeat;
    background-size: cover;
    color: #fff;
    padding: 60px 0;
}
    

.showroom p {
    margin-bottom: 40px;
}

.contact {
    width: 300px;
    background-color: black;
    color: #fff;
    position: absolute;
    margin-top: 60px;
    padding: 30px;
    box-sizing: border-box;
    text-align: center;
}

.map {
    position: relative;
}



.footer .wrapper {
    margin-top: -500px;
}

.contact p.big {
    font-size: 25px;
    margin-bottom: 20px;
}

.contact p  {
    margin-bottom: 20px !important;
    font-size: 15px;
}

.contact a {
    color: orange;
}

p.small {
    font-size: 12px;
}



.owl-nav {
    position: relative;
    top: 30px;
}


.owl-prev, .owl-next {
    position: absolute;
}
    


.owl-prev {
    left: 0;
    background: 0;
}

.owl-next {
    right: 0;
    background: 0;
}

.owl-dots {
    margin-top: 30px;
    text-align: center;
}

.owl-dot {
    height: 15px;
    width: 15px;
    background-color: #FFF;
    border-radius: 15px;
    display: inline-block;
    margin: 0 5px 0 5px;
    transition: 0.3s;
}

.owl-dot.active {
    background-color: #f7971d;
}

.owl-prev:hover, .owl-next:hover {
    color: #f7971d !important;
    transition: 0.3s;
}

.gallery .owl-item.active.center {
    transform: scale(1)!important;
    transition: 0.6s;
}
.gallery .owl-item {
    transform: scale(0.8)!important;
}

.features tr {
    border-bottom: 1px dotted grey;
    cursor: pointer;

}

.features tr td {
    padding: 10px 40px;
}

.features td:first-child {
    font-weight: 500;
}

.features tr:hover {
    background-color: #f7f7f7;
}




.gallery .img {
    margin-bottom: 20px;
    height: 240px;
    background-size: contain;
    background-repeat: no-repeat;
     background-position: center center;
}

.photos {
    display: flex;
    flex-wrap: wrap;
}

.photos a {
    width: calc(100%/3);
    padding: 5px;
    box-sizing: border-box;
    transition: 0.3s;
}

.photos img {
    width: 100%;
}

.photos a:hover {
    transform: scale(1.1);
}

.mobgall {
    display: none !important;
}

.bg {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: black;
    opacity: 0;
    z-index: -1;
    transition: 0.3s;
}


    
.bgform {
    position: fixed;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -1;
    transition: 0.3s; 
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFF;
}

.bgform.show {
    opacity: 1;
    z-index: 100;
}

.bg.show {
    opacity: 0.7;
    z-index: 98;
}


.feedback {
    position: fixed;
    bottom: 30px;
    right: 30px;
    font-size: 30px;
    color: #ffff;
    background-color: black;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 1;
    cursor: pointer;
    z-index: 80;
}

.feedback.open {
    z-index: 999;
}

@media(max-width: 1400px) {
    .sidebar, .contact {
        width: 250px;
    }

    .content {
        margin-left: 290px;
    }

    .wrapper {
        padding: 0 30px 0 30px !important;

    }

}


@media(max-width: 1200px) {
    .catalog.grid .item {
        width: calc(100%/2 - 60px);
    }

    
}


@media(max-width: 850px) {
    .sidebar {
        display: none;
    }
        
    .features {
        margin: 30px auto 0 auto ;
        
    }

    .mobgall {
        display: block !important;
    }

    .mobgall .owl-dot {
        background-color: black;
    }

    .mobgall .owl-dot.active {
        background-color: orange;
    }

    .mitem {
        height: 270px;
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
        background-color: #f4f4f4;
    }

    .features tr td {
        padding: 5px 15px;
    }   
    .content {
        margin-left: 0;
        padding-top: 100px;
    }

    .mobmenu {
        display: block;
        
    }


    .menu {
        position: fixed;
        top: 0;
        right: -200px;
        background-color: black;
        margin-left: 0;
        width: 200px;
        padding: 30px;
        box-sizing: border-box;
        transition: 0.3s;
        z-index: 999 !important;
    }

    .menu.show {
        right: 0;
    }


    .menu ul li {
        display: block;
        margin-bottom: 20px;
    }

    .menu ul li:last-child {
        margin-bottom: 0;
    }

    .header {
        position: fixed;
        width: 100%;
        z-index: 99;
    }


}


@media(max-width: 600px) {
    .icons {
        display: none;
    }

    .catalog.grid .item {
        width: 100%;
        height: auto;

    }

    .catalog .item img {
        filter: grayscale(0);
    }

    .catalog .item .desc, .catalog .item .price {
        position: relative;
    }

    .catalog .item .title, .catalog .item .desc {
        margin-bottom: 20px;
    }

    .footer .wrapper {
        margin: 0;
    }

    .contact {
        width: auto;
        margin-top: 0;
        margin-left: -30px;
    }

    .map {
        height: 350px;
    }

    .features {
        font-size: 85%;
    }
}



@media(max-width: 330px) {
    

     a.logo img {
        position: relative;
        transform: translateX(-20%);
    }
        
        
}














    
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/clear.css">
    <link rel="stylesheet" href="css/adaptive.css">
    <title>Pornohub</title>
    <script src="js/script.js"></script>
    <link href="owl.carousel.min.css" rel="stylesheet" type="text/css" />
    <script src="owl.carousel.min.js" type="text/javascript"></script>
    
    <link href="img/favicon.png" rel="shortcut icon" type="image/x-icon" />
    <script src="https://kit.fontawesome.com/8e0bceeac7.js" crossorigin="anonymous"></script>
    <link href="https://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,700,800,900&display=swap" rel="stylesheet">
</head>
<body>

    <div class="header">
        <div class="wrapper">
            <a class="logo" href="index.html"><img src="img/logo.svg" alt="logo"></a>
            <div class="menu">
                <ul>
                    <li><a href="#">Гитары</a></li>
                    <li><a href="#">Бас-Гитары</a></li>
                    <li><a href="#">Усиление</a></li>
                    <li><a href="#">Эффекты</a></li>
                    <li><a href="#">О нас</a></li>
                </ul>
            </div>
            <div class="mobmenu"><i class="fas fa-bars"></i><i class="fas fa-times"></i></div>
        </div>
    </div>
        <div class="bg"></div>
    <div class="wrapper">
        <div class="sidebar">
            
        </div>
        <div class="content">
            <h1>Гитары</h1>
            <div class="submenu">
                <ul>
                    <li><a href="#">Все бренды</a></li>
                    <li><a href="#">BC Rich</a></li>
                    <li class="active">Charvel<a href="#"></a></li>
                    <li><a href="#">Danelectro</a></li>
                    <li><a href="#">ESP</a></li>
                    <li><a href="#">Fender</a></li>
                    <li><a href="#">Squier</a></li>
                    <li><a href="#">Fernandes</a></li>
                    <li><a href="#">Burny </a></li>
                    <li><a href="#">G&L</a></li>
                    <li><a href="#">Gibson</a></li>
                    <li><a href="#">Orville</a></li>
                    <li><a href="#">Godin</a></li>
                    <li><a href="#">Greco</a></li>
                    <li><a href="#">Gretsch</a></li>
                    <li><a href="#">Ibanez</a></li>
                    <li><a href="#">Jackson</a></li>
                    <li><a href="#"> Music Man/Ernie Ball</a></li>
                    <li><a href="#">PRS</a></li>
                </ul>
            </div>
            
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit, quibusdam. Praesentium dolorem ea aperiam voluptas officiis minus eos voluptate, eligendi unde, assumenda delectus laudantium nisi, debitis consequuntur ullam id ex rerum, tempora in repellat neque saepe officia numquam sequi?</p>

            <div class="icons"><i class="fas fa-th grid active"></i><i class="fas fa-bars list"></i></div>


            <div class="catalog grid">
                
            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>
                
            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>

            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>

            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>

            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>

            <a href="single.html" class="item">

            <img src="img/guitar.png">

            <div class="col">
                
            <span class="title">Fender Telecaster TL71</span>

            <span class="desc">Japan 1994</span>
            <span class="price">29 000 ₽</span>
            </div>
            </a>    
                


            </div> 
                    
                        
                
            </div>
        </div>

        
    </div>

    <div class="showroom">
        <div class="wrapper">
            <h2>Приходите к нам!</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla justo tortor, dapibus et varius nec, iaculis nec sem. In dictum vel est sed tincidunt. Duis sagittis volutpat dui. Nulla ut fermentum sapien, ac faucibus arcu. Curabitur aliquet ultricies elit, vitae egestas ipsum tincidunt in.</p>

            <div class="gallery">
                
            <ul class="owl-carousel">   
            <li><div class="img" style="background-image: url(https://img2.goodfon.ru/wallpaper/nbig/4/a7/studio-midi-guitar.jpg);"></div><span>Наш магазин</span></li>
            <li><div class="img" style="background-image: url(https://www.jasonstallworth.com/wp-content/uploads/2019/07/Home-Recording-Studio-Guide-Metal-Guitarists.jpg);"></div><span>Наш магазин</span></li>
            <li><div class="img" style="background-image: url(https://img2.goodfon.ru/wallpaper/nbig/4/a7/studio-midi-guitar.jpg);"></div><span>Наш магазин</span></li>
            <li><div class="img" style="background-image: url(https://www.jasonstallworth.com/wp-content/uploads/2019/07/Home-Recording-Studio-Guide-Metal-Guitarists.jpg);"></div><span>Наш магазин</span></li>
            <li><div class="img" style="background-image: url(https://img2.goodfon.ru/wallpaper/nbig/4/a7/studio-midi-guitar.jpg);"></div><span>Наш магазин</span></li>
            <li><div class="img" style="background-image: url(https://www.jasonstallworth.com/wp-content/uploads/2019/07/Home-Recording-Studio-Guide-Metal-Guitarists.jpg);"></div><span>Наш магазин</span></li>

            </ul>  
                
            </div> 
            
            
        </div>

        
    </div>

    

    <div class="footer">
        <div class="map"><script type="text/javascript" charset="utf-8" async src="https://api-maps.yandex.ru/services/constructor/1.0/js/?um=constructor%3Ad80f59a6d32f7a6317b3192bb68df1d817ddc14bface4593cc7295640f3a9501&amp;width=100%&amp;height=500&amp;lang=ru_RU&amp;scroll=true"></script></div>
        <div class="wrapper">
            <div class="contact">
                <p class="big">Звоните, пишите,не скучайте :)</p>

                <p><a href="mailto:info@guitarbank.ru">info@guitarbank.ru</a></p>

                <p>Наб. реки Фонтанки, 78<br/>
                <a href="tel:79219647422">+7 921 964 7442</a></p>

                
                <p class="small">Отвечаем на звонки и сообщения ежедневно с 12:00 — 20:00. Чтобы посетить Guitarbank — позвоните нам заранее, подберем удобное время для встречи.</p>        
            </div>
        </div>
    </div>

    <div class="feedback openform"><i class="fas fa-comments"></i></div>
    <div class="bgform">1</div>

</body>
</html>

html
Martin Hope
Tempest
Asked: 2020-03-23 05:46:18 +0000 UTC
  • 0

尝试进入管理面板时，wordpress报错。根据网上的信息，这是关于空格的，但据我所知，functions.php和pluggable.php中都没有多余的空格。问题是什么？

警告：无法修改标头信息 - 标头已由 C:\第 1265 行的 Users\tempe\Downloads\OSPanel\domains\wp-dev\wp-includes\pluggable.php

警告：无法修改标头信息 - 标头已由 C:\第 1268 行的 Users\tempe\Downloads\OSPanel\domains\wp-dev\wp-includes\pluggable.php

函数 .php http://sandbox.onlinephpfunctions.com/code/324030b1a9810ead3662174660b6a13a7aa772c5

pluggable.php从第 1248 行到第 1272 行 http://sandbox.onlinephpfunctions.com/code/7d2c51be77150cf6fbb46242d1c28a22edeef80a

wordpress