Bemfes's questions

我有一些负责图像延迟加载的 js 代码。但如果我们也用 picture 标签包裹 img，并且针对 webp、avif 格式的图片添加 source 标签，那么是否也需要对 source 标签做延迟加载呢？或者如果您使用图像的延迟加载，您可以不用图片标签和 webp、avif 格式吗？

<picture>
    <source srcset="human-back.avif" type="image/avif">
    <img class="lazy first" data-src="human-back.avif" src="pixel.png" alt="">
</picture>

const Images = document.querySelectorAll('img[data-src]');

function loadImages(entries) {
    if (entries[0].isIntersecting) {
        entries[0].target.src = entries[0].target.dataset.src
        observer.unobserve(entries[0].target) 
    }
}

const options = {
    threshold: 0,
    rootMargin: '50px'
}
const observer = new IntersectionObserver(loadImages, options)

Images.forEach(img => {
    observer.observe(img)
})

有一个输入，当你输入一个在文本中多次出现的单词或字母时，这些重复的部分会用mark标签突出显示。我使用正则表达式找到相同的单词，然后使用 Replace() 方法替换它们。但是，在这种情况下，所有字母都会变小，因为输入中的字母已被替换。因此，所有重复的大写字母（或以大写字母开头的相同单词）将被替换为相同的字母，但小写。如何确保替换后字母的大小写与原始大小写相对应？

const text = document.querySelector('.text');

const input = document.querySelector('.input');

input.addEventListener('input', () => {
    let value = input.value
    words(text, value)
    
})

function words(text, search) {
    let words = text.textContent
    if (words.indexOf(`${search}`) != -1 && search != '' && search != ' ') {
        let searchAll = new RegExp(search, 'gi')
        let newText = words.replace(searchAll, '<mark>' + search + '</mark>')
        text.innerHTML = newText
    } else {
         console.log('did not find');
    }
}

    

我正在尝试使用 IntersectionObserver 延迟加载图像。当您将页面滚动到有图片的位置时，一切都会正常加载。但是，当您在已卸载图像的位置重新加载页面时，重新加载时，仅在上下滚动页面时才会加载图像，尽管图像位于查看者的视野中。我们在这里可以做些什么吗？以便观察者可以在重新启动时立即看到需要加载图像？

<img class="lazy" data-src="girl (2).png" src="back.png" alt="">
<img class="lazy" data-src="comf-1.png" src="back.png" alt="">
<img class="lazy" data-src="comf-2.png" src="back.png" alt="">
<img class="lazy" data-src="yoga.png" src="back.png" alt="">

const Images = document.querySelectorAll('img[data-src]');
function loadImages(entries) {
    if (entries[0].isIntersecting) {
        entries[0].target.src = entries[0].target.dataset.src
        observer.unobserve(entries[0].target)   
    }
}
    
const options = {
    threshold: 0,
    rootMargin: '50px'
}
const observer = new IntersectionObserver(loadImages, options)
    
Images.forEach(img => {
    observer.observe(img)
})

我正在训练使用 css-grid，尝试将标题中的三个元素彼此距离相同，但它们都已移至左侧并且不想使用容器的左侧。也就是说，它们需要沿着容器的整个长度放置，彼此之间的距离相等。请帮帮我。

.container {
  width: 140rem;
  margin: 0 auto;
}

.header {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
  align-items: center;
}

.hamburger {
  display: flex;
  flex-direction: column;
  width: 4.8rem;
}

.hamburger span {
  display: block;
  height: .2rem;
  width: 4.8rem;
  background: white;
}

.hamburger span:not(:last-child) {
  margin-bottom: .6rem;
}

<header class="header container">
  <div class="icons">
    <img src="icons/facebook.svg" alt="facebook" />
    <img src="icons/twitter.svg" alt="twitter" />
  </div>
  <img src="icons/logo.svg" alt="logo" />
  <div class="hamburger">
    <span></span>
    <span></span>
  </div>
</header>

我正在尝试制作一个风格化的输入文件，以便在单击时，其标签更改为附加文件的名称。然而，按下第一次后，就无法再按下第二次了。请告诉我，有什么问题吗？

function ready() {
    const inputFile = document.querySelector('.reg-box_file');
    const labelFile = document.querySelector('.screen-label');
    const labelValue = labelFile.textContent
    inputFile.addEventListener('change', function() {
        let fileName = this.files[0].name
        if (fileName) {
            labelFile.textContent = fileName
            labelFile.classList.add('screen-label__active') 
        } else {
            labelFile.innerHTML = labelValue
        }
    })
}

document.addEventListener('DOMContentLoaded', ready)

html:

<div class="screen-container">
       <label class="screen-label" for="screen-file">
              <input
              class="reg-box reg-box_file"
              id="screen-file"
              type="file"
              />
         Прикрепить скриншот</label>
</div>

其实，关于问题的主题，一切都已经很清楚了。我找不到这样的功能 - 模拟手机上的触摸，但可以在计算机上进行测试。告诉。请问，我在哪里可以找到它？

如何使用 javascript 跟踪浏览器窗口大小变化并根据大小更改元素样式？假设有一个红色 div（任意宽度和高度），如果窗口宽度为 540 像素或更小，则该 div 应变为绿色。请告诉我如何实施？我了解 css @media，我需要 javascript。

我正在尝试重置计时器。

首先有一个方块和一个计时器；计时器到期后，方块消失并出现“重复”按钮。按下后，计时器应该会再次倒计时，但数字不会依次变化，只有起始数字。

同时，计时器本身也开始工作：时间结束后，方块就会消失。

如何让按下按钮后出现计时器数字？

const labelTimer = document.querySelector('span')
const div = document.querySelector('div')
const title = document.querySelector('h1')
const button = document.querySelector('button')

let timer

function start() {
    let time = 5;
    function tick() {

      const seconds = time % 60
      labelTimer.textContent = `${seconds}`;
     
      if (time == 0) {
        clearInterval(timer);
        div.style.opacity = 0
        title.textContent = 'Квадрат исчез!'
        button.style.opacity = 100
      }
      time--;
    }
    tick();
    const timer = setInterval(tick, 1000);
    return timer;
  }

start()

button.addEventListener('click', function() {
    title.innerHTML = `Этот квадрат исчезнет через: <span>5</span> секунд`
    div.style.opacity = 100
    button.style.opacity = 0
    timer = start();
})