const container = document.querySelector('.container');
const line = document.querySelector('.invisibility');
const marginBottom = line.getBoundingClientRect().top - container.getBoundingClientRect().bottom;
const options = {
root: document.querySelector('.container'),
rootMargin: `0px 0px ${marginBottom}px 0px`,
threshold: 0
}
const callback = function(entries, observer) {
entries.forEach((entry) => {
entry.target.style.background = entry.isIntersecting ? 'green' : 'red';
});
};
const observer = new IntersectionObserver(callback, options);
container.querySelectorAll('.item').forEach(item => {
observer.observe(item);
});
arr.map(item => Object.fromEntries([item]))
const resultArr = [];
for (let i = 0; i < arr.length; i++) {
const item = arr[i];
const obj = {};
obj[item[0]] = item[1];
resultArr.push(obj);
}
const resultArr = [];
for (let [prop, value] of arr) {
const obj = { [prop]: value };
resultArr.push(obj);
}
const merge = (...arrs) =>
Array.from(
{ length: Math.max(...arrs.map(n => n.length)) },
(_, i) => Object.assign({}, ...arrs.map(n => n[i]))
);
const arr = merge(arr1, arr2);
const merge = (...arrs) =>
arrs.reduce((acc, n) => (
n.forEach((m, i) => Object.assign(acc[i] ??= {}, m)),
acc
), []);
<template>
— из него можно забирать готовый DocumentFragment, который клонировать и наполнять данными.const [ checked, setChecked ] = React.useState(false);
<input
type="checkbox"
checked={checked}
onChange={e => setChecked(e.target.checked)}
...
<button
disabled={!checked}
...
// tagName - Имя тега
// props - объект с свойствами DOM элемента
// children - массив с DOM элементами
function createElement (tagName, props = {}, children = []) {
const newDOMElement = document.createElement(tagName);
if (props) {
for (const prop in props) {
if (Object.prototype.hasOwnProperty.call(props, prop)) {
newDOMElement[prop] = props[prop];
}
}
}
if (children.length) {
children.forEach(child => {
newDOMElement.append(child);
});
}
return newDOMElement;
}
const body = document.body;
// Создаём новый DOM узел
const newDOM = createElement('div', null, [
createElement('h1', null, [
'Заголовок страницы'
]),
createElement('p', null, [
'Привет, Мир!'
]),
createElement('button', {
onclick: () => {
alert('бабах');
}
}, [
'Кликни меня'
])
]);
// Вставляем в body новый DOM узел
body.append(newDOM);
let previousTimer;
const startTimer = (word, delay, callback) => {
const timer = setInterval(
() => {
if (previousTimer !== timer) {
clearInterval(previousTimer);
previousTimer = timer;
}
callback();
},
delay
);
};
startTimer('t1', 280, () => console.log('cb t1'));
startTimer('t2', 1200, () => console.log('cb t2'));
startTimer('t3', 910, () => console.log('cb t3'));
// t1, t1, t1, t3, t2, t2, t2...
onClick(event) {
let action = event.target.dataset.action;
if (action) {
this[action]();
}
}
_elem
кладётся elem это загадка. #itemInner {
counter-reset: bullshit-counter;
}
.row {
counter-increment: bullshit-counter;
}
.row::before {
content: counter(bullshit-counter) "!!!";
}
itemInner.find('.item-num').text(i => i + 1);