index.html
<div class="custom-cursor"> </div>style.css
body {
cursor: none;
}
.custom-cursor {
// стили кастомного курсора
}scripts.js
class CustomCursor { ... }
// реализация поведения кастомного курсора. Должен уметь, наводиться на
//другие элементы (hover), кликать и перемещаться по странице.document.addEventListener('click', doSomething)
// вывести в консоль все аргументы, переданные в функцию
function doSomething () { console.log(arguments) }
document.addEventListener('click', doSomethingElse)
// называем event по другому, чтобы всех запутать
function doSomethingElse (handmaidsNotes ) { console.log(handmaidsNotes ) }
// Функция заменяет число на число с пробелами
const musk = val => {
return val
.toString()
.split('')
.map((num, i, arr) => {
return (arr.length - 1 - i) % 3 === 0 && i !== arr.length - 1
? num + ' '
: num
})
.join('')
}
// меняет значение формы на отформатированное значение
const inpHandler = function() {
return this.value = musk(this.value)
}
// вешаем обработчик
input.addEventListener('input', inpHandler)
//Консольные тесты
const testValue = {value: 10000, inpHandler: inpHandler}
console.log(testValue.inpHandler())
console.log(musk(1000))
console.log(musk(10000))
console.log(musk(100000))let isChange = false
elem.onClick = (evt) => {
evt.preventDefault();
this.style.backgroundImage: isChange ? 'url-to-img' : '';
// Если true, ставим картинку, если нет, не ставим. Или любая другая логика, которая вам нужна.
isChange = !isChange; // Меняем состояние на обратное, чтобы каждый второй клик менял фон
}if (element.previousSibling) {
// ... остальной код Дмитрия Дерепко
}
// Или без вложенных циклов
// сначала проверить: если у элемента нет предшествующего элемента
if (!element.previousSibling) {
return element;
// вернуть элемент, чтобы другая функция что-то с ним могла сделать.
// Или вернуть false, не суть. Важно просто обработать сценарий, когда элемент
// идет первым в родителе. Можно просто выйти из функции.
}
// Дальше, если предшественник есть, делаем как в коде Дмитрия
const targetTags = ['h1', 'h2', ...],
lowerName = element.previousSibling.nodeName.toLowerCase();
if (!targetTags.includes(lowerName)) {
// do samething
}
// Кстати, можно targetTags передавать сразу аргументом в функцию, чтобы код был чуть
// более универсальным.
function doSomethingEpic(element, targetTargs) {
// code
}
const someElem = document.querySelector('.epicElement');
const tags = ['h1', 'h2', ...],
doSomethingEpic(someElement, tags);