Denis's questions

我正在使用 AIR DATEPICKER 插件 这是 HTML

<input class="date" type="text" name="#" placeholder="dd.mm.yyyy" />
<input class="date" type="text" name="#" placeholder="dd.mm.yyyy" />
<input class="date" type="text" name="#" placeholder="dd.mm.yyyy" />

如果像这样初始化

new AirDatepicker('.date');

然后，只有当您单击第一个输入时，日历才会出现。这个解决方案也不起作用

$(".date").each(function() {
    new AirDatepicker($(this));
});

如何使用日期类初始化所有输入的插件？

网站上有这样一个模态窗口

我不知道如何实施。当您点击“我同意条款和条件”时会发生什么。只需关闭窗口或某些代码应该可以工作。WordPress 上的网站。

这是html

<div class="cookie_modal">
    <div class="row">
        <div class="cookie">
            <div>
                <p>Продолжая пользоваться сайтом,<br /> вы соглашаетесь с условиями <a href="#">использования файлов cookie</a>.</p>
            </div>
            <div>
                <a href="#" class="blue_pill close_cookie">Соглашаюсь с условиями</a>
            </div>
        </div>
    </div>
</div>

这是 HTML

<form  enctype="multipart/form-data">
<input name="file" id="myfiles" multiple type="file"  />
<button type="submit" class="ancSubmit">send</button>
</form>

这是JS

const fileInput = document.querySelector('#myfiles');
const files = [];
const pushFiles = function(){
files.push(...fileInput.files);
}
document.querySelector('#myfiles').onchange = pushFiles;

代码 console.log(files) 输出

(2) [File, File]

这段代码之后

    var index = 1;
    var i = 0;
    for (const file of files) {
      if (i == index) {
        delete files[i];
      }
      i++;
    }
console.log(files)

控制台产生以下内容

(2) [File, пусто]

也就是说，还剩下两个元素，但其中一个为空。需要重写数组，删除空白空间。怎么做？

这是 HTML

<form>
   <input name="file" id="myfiles" multiple type="file">
</form>

这是JS

var fileInput = document.querySelector("#myfiles");
var pullfiles=function(){
      var files = fileInput.files;
      var fl=files.length;
      console.log(fl);
  }
 document.querySelector("#myfiles").onchange=pullfiles;

再次将文件添加到#myfiles 时，console.log(fl) 仅报告新添加的文件数。也就是说，新文件不会添加到先前添加的文件中。因此，只有最近添加的文件才会发送到您的电子邮件。所有文件必须通过电子邮件到达。怎么做？

这是 HTML

   <input id="myfiles" multiple type="file">
    <div id="dropArea">
        <div class="upl_btn">
            <label for="myfiles"><label>
        </div>
    </div>

这里是上传文件时显示缩略图的JS。

  var fileInput = document.querySelector("#myfiles");
  var pullfiles=function(){      
      var files = fileInput.files;
      var fl=files.length;
      var i=0;
      var dropArea = $("#dropArea");
      var templ = "";
      var file;
      while ( i < fl) {
          file = files[i];
          fileUrl = URL.createObjectURL(file);
          if(fileUrl) {
          templ += "<div class='photo_box_wrapp'>"+
                    "<div class='photo_box'><img src='"+fileUrl+"' alt='' />"+
                    "</div><button type='button'>х</button></div>";
                }
          i++;
      }
      dropArea.prepend(templ);
      document.querySelector("#myfiles").onchange=pullfiles;
  }

删除缩略图

    $(document).on("click", ".photo_box_wrapp button", function(e) {
        e.preventDefault();
        var parent = $(this).closest(".photo_box_wrapp");
        var index = parent.attr("data-index");
        var fileInput = document.querySelector("#myfiles");
        var files = fileInput.files;
        $("#dropArea .photo_box_wrapp").each(function() {
          if($(this).attr("data-index") == index ) {
            $(this).remove();
          }
        });
        var countIndex = 0;
        $("#dropArea .photo_box_wrapp").each(function() {
          $(this).attr("data-index", countIndex);
          countIndex++;
        });
        var newFiles = [];
        for (var i = 0; i < files.length; i++) {
        if (i !== index) {
            newFiles.push(files[i]);
          }
        }
// Может я тут ошибся
        files = newFiles;
        fileInput.value = "";
        fileInput.value = fileInput.value;
        parent.remove();
      });
//--------------

单击叉号时，文件缩略图将被删除。删除缩略图后如何覆盖#myfiles 中的值？

这是 HTML

<input class="rangeInput" type="number" name="range_min" id="range_min" />

在 type="number" 的输入中加载页面时，逗号不代表数字。用户必须只能输入数字和逗号。试图用 JS 来做。

这是JS

$(".rangeInput").each(function() {
  str = $(this).val();
  res = format(str);
  $(this).val(res);
});

function format(str) {
    const s = str.length;
    const chars = str.split('');
    const strWithSpaces = chars.reduceRight((acc, char, i) => {
        const spaceOrNothing = ((((s - i) % 3) === 0) ? ',' : '');
        return (spaceOrNothing + char + acc);
    }, '');
    return ((strWithSpaces[0] === ',') ? strWithSpaces.slice(1) : strWithSpaces);
}

但是输入中的值仍然没有显示。怎么做？

这是JS

$(".btn").on("click", function(e) {
  e.preventDefault();
  $.ajax({
    url: "mail.php",
    method: 'post',
    data: {
      index: "1"
    },
    success: function (response) {
        var json = response;
        console.log(json);
    }
 });

这是PHP

if(isset($_POST['index'])) {
    $index = strip_tags($_POST['index']);
    if($index == "1") {
        $res = array(
            'name' => 'Den',
            'age' => '30'
        );
        echo json_encode($res);
        die();      
    }
}

输出到控制台

{“姓名”：“书房”，“年龄”：“30”}

这是这样的JS

console.log(json.name +"  "+ json.age);

不输出“Den 30”。我不明白为什么。

这是HTML

<div class="status_wrapp"></div>

这是CSS

.status_stars {
    display: block;
    height: 24px;
    border-radius: 48px;
    -webkit-border-radius: 48px;
    border-image-slice: 1;
    border-width: 2px;
    -webkit-border-width: 2px;
    border-style: solid;
    border-image-source: linear-gradient(to left, #FFED4F, #FFC34F);
    border-image-source: -webkit-linear-gradient(to left, #FFED4F, #FFC34F);
}

原来是这样

你需要这样

如何制作带圆角的框架？

根据布局，一般情况下应该是这样的

<h3>Мы с Вами:</h3>
//нужно вывести данные в таком вот виде
<p>12 лет ___ 3 месяца ___ 5 дней ___ 21 час ___ 15 минут ___ 25 секунд</p>

到处只有倒计时。到目前为止，我还没有在 JavaScript 中找到一个。怎么写成这样？

有一个网站http://brilgo.ru/。它已转移到新域https://brilgo.pro。网站图标已更改。当您打开链接https://brilgo.pro时，该网站图标在 safari 中不可见，或者旧网站图标而不是新网站图标可见。

这是新的网站图标

描述也不见了。将链接复制到 Telegram 时，消息只是一个链接，但应该带有图标和描述。如何解决这样的问题？有没有插件可以帮助解决这个问题？

这是布局：

这是不起作用的svg代码。

<svg width="727" height="620" viewBox="0 0 727 620" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path d="M533.771 0H0V620H727V247.5L533.771 0Z" fill="url(#pattern0)"/>
<path d="M533.771 0H0V620H727V247.5L533.771 0Z" fill="url(#paint0_linear)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="translate(0 -0.134532) scale(0.000927721 0.00108783)"/>
</pattern>
<linearGradient id="paint0_linear" x1="711" y1="620" x2="363.5" y2="620" gradientUnits="userSpaceOnUse">
<stop stop-color="#0B1424"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<image id="image0" width="1080" height="1080" src="https://cdn2.unrealengine.com/kena-keyart-1200x1600-1200x1600-3cc88c815329.png?h=854&resize=1&w=640" />
</defs>
</svg>

也就是说，您需要能够插入任何图像。并且右上角应该被剪掉。请告诉我我的错误在哪里。

这是布局

这是html

h2 {
  font-family: 'Playfair Display', serif;
  font-size: 104px;
  line-height: 1;
  font-weight: 700;
  text-shadow: 0 0 1px #fff;
  background: #503012;
  background: -webkit-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
  background: -moz-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
  background: linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

<h2>РАСПРОДАЖА</h2>

这样就得到了白色的文字，但需要保留渐变，并且像布局上一样在周围有一个白色的阴影。怎么做？

有一个布局

这是html

<h2>РАСПРОДАЖА</h2>

这是CSS

.double_text h2 {
    font-family: 'Playfair Display', serif;
    font-size: 104px;
    line-height: 110px;
    font-weight: 700;
    background: #503012;
    background: -webkit-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    background: -moz-linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    background: linear-gradient(to top, #503012 0%, #A77027 30%, #F7A93B 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

我怎样才能给这个文本一个 3px 的白色描边？

$(document).on("click", ".tabs_arrow", function(e) {
  e.preventDefault();
  if ($(this).hasClass("left_tabs_arrow")) {
    $(".mCSB_buttonLeft").trigger("click");
  }
  if ($(this).hasClass("right_tabs_arrow")) {
    $(".mCSB_buttonRight").trigger("click");
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="tabs_arrows">
  <button type="button" class="tabs_arrow left_tabs_arrow">left</button>
  <button type="button" class="tabs_arrow right_tabs_arrow">right</button>
</div>
<div class="chart_tabs_scrollbar">
 <a href="#" class="mCSB_buttonLeft"></a>
 <a href="#" class="mCSB_buttonRight"></a>
</div>

有.chart_tabs_scrollbar用于滚动插件滚动条的按钮。但是点击事件不会传递给他们。怎么做才对？我正在使用 mCustomScrollbar 插件。这是他的mCustomScrollbar页面

这是布局

这是发生的事情

对绿色圆圈的定制感兴趣。

这是html

<line x1="15" y1="497" x2="15" y2="497" class="ct-point"></line>

这是CSS

.static_chart .ct-point {
    stroke-width: 20px;
    stroke: #8fbf6e;
}

如何为绿色圆圈添加白色背景？我无法进入 html，因为此 svg 代码是由图表插件生成的。单独使用 CSS 怎么能做到这一点？

这是一个布局

.loader {
  height: 14px;
  overflow: hidden;
  position: relative;
  margin: 1px 0 0 0;
  border: 1px solid #eeedfd;
  background: #eeedfd;
  border-radius: 7px;
  -webkit-border-radius: 7px;
}

.loader_line {
  border-radius: 7px;
  -webkit-border-radius: 7px;
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  right: 0;
  background: linear-gradient(134.45deg, #7065F8 0%, #9B93FC 100%);
  background: -webkit-linear-gradient(134.45deg, #7065F8 0%, #9B93FC 100%);
}

<div class="loader">
  <div class="loader_line" style="right:calc(100% - 85% )"></div>
</div>

也就是说，有灰色背景和蓝色，但没有半透明的侧槽口？如何制作它们？

有这样一张图

body {
  background: #ffffff;
}

.wrapper {
  position: relative;
  display: flex;
  display: -ms-flexbox;
  display: -webkit-flex;
  flex-direction: column;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  min-height: 100%;
  min-width: 100%;
  width: 100%;
}

header {
  flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
  position: relative;
  z-index: 4;
}

.content {
  flex: 1 0 auto;
  -webkit-flex: 1 0 auto;
}

footer {
  flex: 0 0 auto;
  -webkit-flex: 0 0 auto;
}

.row {
  width: 100%;
  max-width: 1920px;
  min-width: 1600px;
  margin: 0 auto;
  padding: 0 25px;
}

.main_page {
  background-color: #d40c0c;
  background-size: cover;
  background-image: url(img/dots_bg.png);
}

<div class="wrapper main_page">
  <header>
    header
  </header>
  <div class="content">
    <section>
      <div class="row">class="row"</div>
    </section>
  </div>
  <footer class="footer_section">
    class="footer_section"
  </footer>
</div>

水平滚动时如何防止背景被切断？

这是HTML

<div class="info_table">
    <div class="table_row">
        <div class="cell">
            <p>Price</p>
        </div>
        <div class="cell">
            <p class="red_p">$49</p>
        </div>
    </div>
    <div class="table_row">
        <div class="cell">
            <p>Tracked Keywords</p>
        </div>
        <div class="cell">
            <p>500</p>
        </div>
    </div>
</div>

将鼠标悬停在相对于父级“.table_row”而不是“.info_table”上时，您需要知道“.cell”的索引。怎么做？

有 bc_card 类的卡片。将鼠标悬停在卡片上时，您需要计算除光标所在卡片之外的所有卡片的高度。这是行不通的。

   $('.bc_card').on('mouseover', function() {
        innerWrappHeightArr = [];
        $(".bc_card").each(function() {
        if( !$(this).not() ) { // наверное это условие не правильное
          innerWrapp = $(this).find(".inner_content");
          innerWrappHeight = $(this).height();
          innerWrappHeightArr.push(innerWrappHeight);
        }
       });
       maxHeight = Math.max.apply(null, innerWrappHeightArr);
       $(".bc_card").css({
         "height" : maxHeight + "px"
       });
    });

怎么做？

这是功能

function getCardParams() {
    innerWrappHeightArr = [];
    $(".bc_card").css({
        "height" : "auto"
    });
    $(".bc_card").each(function() {
        innerWrapp = $(this).find(".inner_content");
        innerWrappHeight = $(this).height();
        innerWrappHeightArr.push(innerWrappHeight);
    });
    maxHeight = Math.max.apply(null, innerWrappHeightArr);
    $(".bc_card").css({
        "height" : maxHeight + "px"
    });
}

如何仅在浏览器窗口大小调整结束后运行它？我们需要计算所有卡片的最大内容高度。