小编Mis*_*ojo的帖子

我的问题是:给定目标RGB颜色,#000使用CSS滤镜将黑色()重新着色为该颜色的公式是什么？

为了接受答案,它需要提供一个函数(以任何语言)接受目标颜色作为参数并返回相应的CSS filter字符串.

对此的上下文是需要在a内重新着色SVG background-image.在这种情况下,它是支持KaTeX中的某些TeX数学特性:https: //github.com/Khan/KaTeX/issues/587.

例

如果目标颜色为#ffff00(黄色),则一个正确的解决方案是:

filter: invert(100%) sepia() saturate(10000%) hue-rotate(0deg)

(演示)

非目标

• 动画.
• 非CSS过滤器解决方案.
• 从黑色以外的颜色开始.
• 关心黑色以外的颜色会发生什么.

结果到目前为止

• 强力搜索固定过滤器列表的参数:https
  ://stackoverflow.com/a/43959856/181228缺点:效率低下,只生成一些16,777,216种可能的颜色(676,248 hueRotateStep=1).

• 使用SPSA的更快的搜索解决方案:https : //stackoverflow.com/a/43960991/181228 Bounty奖励

• 一个drop-shadow解决方案: /sf/answers/3077189741/
  缺点:不上边缘运行.需要非filterCSS更改和次要HTML更改.

您仍然可以通过提交非暴力解决方案获得接受的答案!

资源

• 如何hue-rotate和sepia计算: /sf/answers/2066480321/ 例的Ruby实现:

  LUM_R = 0.2126; LUM_G = 0.7152; LUM_B = 0.0722
  HUE_R = 0.1430; HUE_G = 0.1400; HUE_B = …

  Run Code Online (Sandbox Code Playgroud)

我想用javascript制作一个无限轮播。当元素离开屏幕时，我会克隆它们并将它们粘贴到列表的末尾。但一分钟后，HTML 布局中就会出现很多克隆元素。我决定在克隆后删除这个元素。但我得到了所有元素的即时偏移。如何避免呢？或者也许还有另一种算法来实现这个无尽的轮播？

这是代码https://codepen.io/alessandro-kex/pen/abGWNEK

window.addEventListener("load", function () {
  const slideContainer = document.querySelector(".carousel");
  const slidesWrapper = document.querySelector(".carousel-slides");
  let slides = document.querySelectorAll(".carousel-slide");
  let index = 0;
  const interval = 1500;
  let moveDistance = 0;
  const paddingRight = 50;
  let lastSlideIndex = slides.length - 1;
  let firstClone;

  const startSlide = (index) => {
    this.setInterval(() => {
      moveDistance = moveDistance + slides[index].clientWidth + paddingRight;
      slidesWrapper.style.transform = `translateX(${-moveDistance}px)`;
      slidesWrapper.style.transition = "1s";

      firstClone = slides[index].cloneNode(true);
      firstClone.id = `first-clone-${index}`;
      slidesWrapper.append(firstClone);
      /*If uncomment it - then the problem …

我正在使用CodePen中的以下脚本

// Create Countdown
var Countdown = {

    // Backbone-like structure
    $el: $('.countdown'),

    // Params
    countdown_interval: null,
    total_seconds     : 0,

    // Initialize the countdown  
    init: function() {

    // DOM
        this.$ = {
        hours  : this.$el.find('.bloc-time.hours .figure'),
        minutes: this.$el.find('.bloc-time.min .figure'),
        seconds: this.$el.find('.bloc-time.sec .figure')
    };

    // Init countdown values
    this.values = {
            hours  : this.$.hours.parent().attr('data-init-value'),
        minutes: this.$.minutes.parent().attr('data-init-value'),
        seconds: this.$.seconds.parent().attr('data-init-value'),
    };

    // Initialize total seconds
    this.total_seconds = this.values.hours * 60 * 60 + (this.values.minutes * 60) + this.values.seconds;

    // Animate countdown to the …

我对 JavaScript 中的 array.some() 方法有疑问。我有一个 html 代码：

<div class="list">
 <div class="item"></div>
 <div class="item"></div>
 <div class="item selected"></div>
</div>

我试图找到包含类名“selected”的数组元素。

const items = document.querySelectorAll('.item');

items.some(item => {
 if (item.classList.contains('selected')) { console.log(true); }
 else { console.log(false); }
});

但我得到的只是这个错误：“Uncaught TypeError: items.some is not a function” 有人可以告诉我，为什么 Array.some() 方法不适用于 div 数组？谢谢

我想在 codepen 中显示的示例中使用 bootstrap 5 响应式菜单，我尝试了几件事，但它一直在以一种或多种方式破坏。

https://codepen.io/KGuide/pen/WNogyyV

我想使用引导菜单并替换当前菜单，以便该菜单响应大屏幕悬停动画。

<nav class="navbar navbar-expand-lg navbar-light p-5">
            <div class="container">
              <a class="navbar-brand" href="#"><img class="img-fluid" src="images/logo.png"/></a>
              <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
              </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav">
                  <li class="nav-item">
                    <a class="nav-link active" aria-current="page" href="#">Home</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Offers</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link" href="#">Pricing</a>
                  </li>
                  <li class="nav-item">
                    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
                  </li>
                </ul>
              </div>
            </div>
          </nav>

<nav class="navbar navbar-expand-lg navbar-light p-5">
            <div class="container">
              <a class="navbar-brand" …

我有一个名为userList的数组，并通过循环将一些数据推入其中来填充它。

userList.push({
  userProfileID : dataEntry.UserProfileID ,
  isAgent       : dataEntry.isAgent       ,
  firstName     : dataEntry.firstName     ,
  roleNames     : dataEntry.roleNames
})

输出将是这样，还有100条记录

0: Object {userProfileID: "68670", isAgent: false, firstName: "ARSDEO", roleNames:"Deo Role"}
1: Object {userProfileID: "68672", isAgent: false, firstName: "ARSBM101", roleNames:"BM Role"}
2:.......
3:.......

在这里，我要删除 userList数组中具有roleNames ='BM role'的条目

我尝试了这个：

userList = userList.filter(item => userList.roleNames == 'BM Role');

但是我没有数组记录。请指教...

我有一个关于thisjavascript 的问题。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this

当我读这篇文章时，它说

在箭头函数中，this保留封闭词法上下文的 this 值。在全局代码中，它将被设置为全局对象

但例如下面的代码

const person = {
  hobby: "loafing around",
  sayHobby: function() {
    setTimeout(() => {
      console.log(`My hobby is ${this.hobby}`);
    }, 100);
  }
};

person.sayHobby()

在此示例中，setTimeout 中的箭头函数回调被包含在 setTimeout 函数中。所以我认为this它应该是全局的（窗口），因为 setTimeout 是在全局对象中定义的。

我知道我的想法是错误的，但不知道如何理解这句话的意思enclosing lexical context。你能帮我理解这一点吗？如何找到词汇上下文？

我有一个侧面菜单，单击按钮时会显示，更改其宽度后会显示。一切工作正常，尽管如此，我想让整个主体（菜单除外）看起来变暗，并且如果可能的话，防止点击菜单以外的任何内容。当菜单关闭时，一切都应该恢复正常。

JS的第二部分用于关闭菜单，当检测到菜单外部的单击时，它可以工作，但我想仅在菜单打开时才使其处于活动状态，例如：

if(menuOpen)
  {
  $(document).mouseup(function(e)  
    {
    var container = $("mySidenav");
    if (!container.is(e.target) && container.has(e.target).length === 0)  
      {
      closeNav();
      }
    });
  }

if(menuOpen)
  {
  $(document).mouseup(function(e)  
    {
    var container = $("mySidenav");
    if (!container.is(e.target) && container.has(e.target).length === 0)  
      {
      closeNav();
      }
    });
  }

var menuOpen = false;

function openNav() {
  document.getElementById("myMenu").style.width = "50%";
  menuOpen = true;
}

function closeNav() {
  document.getElementById("myMenu").style.width = "0%";
  menuOpen = false;
}

$(document).mouseup(function(e) {
  var container = $("mySidenav");

  if (!container.is(e.target) && container.has(e.target).length === 0) {
    closeNav();
  }
}); …

请帮忙。

function fontDown() {
  var curSize = parseInt($('.box').css('font-size'));
  curSize--;
  $('.box').css('font-size', curSize + "pt").css('line-height', curSize + "pt");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button onclick="fontDown()">button</button>
    
<div class="box" style="font-size: 14pt; line-height: 14pt;">sometext</div>

我希望每次按下按钮时字体大小都会减小。但是，它只会增加。不仅如此，每次按下按钮，字体大小都会增加大约 5 或 7 磅。

我有一个选择框位于其中，它还包含一个输入，我想通过它找到必要的项目。我像这样进行了搜索，首先我接受一个数组，然后将其小写并搜索匹配项。不知何故，我需要匹配所需的 ID 以排除不可用的 ID 并显示必要的复选框

简单来说，我想过滤我的查询并实时显示它。

我必须只使用 vanila JS

let search = document.getElementById("search");\nlet s = document.querySelectorAll("input[type=checkbox][name=one]");\n\n//s.forEach((item) => {\nsearch.addEventListener("input", () => {\n  let data = [];\n\n  let count = Array.from(s).map((i) => i.value.toLowerCase().includes(search.value.toLowerCase()));\n\n  console.log(count);\n\n});\n//});

label { display: block; }

<div id="checkboxes2">\n  <div class="control">\n    <input class="input" type="text" placeholder="\xd0\x9f\xd0\xbe\xd0\xb8\xd1\x81\xd0\xba" id="search" />\n    <span class="icon is-small is-left">\n            <span class="searchIcon"></span>\n    </span>\n  </div>\n  <label for="one2" class="select_label">\n          <input type="checkbox"  value="\xd0\x9f\xd0\xbe\xd0\xba\xd0\xb0\xd0\xb7\xd0\xb0\xd1\x82\xd1\x8c \xd0\xb2\xd1\x81\xd0\xb5" name="one" id="one2" />\xd0\x9f\xd0\xbe\xd0\xba\xd0\xb0\xd0\xb7\xd0\xb0\xd1\x82\xd1\x8c \xd0\xb2\xd1\x81\xd0\xb5\n          <span class="select_label-icon"></span\n        ></label>\n  <label for="one2" class="select_label">\n          <input …