<div id="sound-btn-wrapper">
<div class="btn btn-start">On</div>
<div class="btn btn-stop">Off</div>
</div>
const audio = new Audio('...');
$('#sound-btn-wrapper').on('click', '.btn', function() {
audio.pause();
if ($(this).hasClass('btn-start')) {
audio.currentTime = 0;
audio.play();
}
});
function simpleSlider(element) {
const root = typeof element === 'string'
? document.querySelector(element)
: element;
const items = root.querySelectorAll('.slider__item');
const prev = root.querySelector('.slider__btn-prev');
const next = root.querySelector('.slider__btn-next');
let index = 0;
function slideTo(newIndex) {
items[index].classList.remove('slider__item--active');
index = (newIndex + items.length) % items.length;
items[index].classList.add('slider__item--active');
}
prev.addEventListener('click', () => slideTo(index - 1));
next.addEventListener('click', () => slideTo(index + 1));
}
simpleSlider('#slider1');
simpleSlider(document.querySelector('#slider2'));
const elements = [...document.getElementsByTagName('p')];
// или
const elements = Array.from(document.getElementsByTagName('p'));
// или
const elements = [].concat.apply([], document.getElementsByTagName('p'));
// или
const elements = Array.prototype.slice.call(document.getElementsByTagName('p'));
// или
const elements = Object.values(document.getElementsByTagName('p'));
const result = arr.filter((n, i, a) => n === a.find(m => m.lat === n.lat && m.lng === n.lng));
const result = Object.values(arr.reduce((acc, n) => (acc[`${n.lat},${n.lng}`] = n, acc), {}));
const result = [].concat(...Object
.values(arr.reduce((acc, n) => ((acc[n.lat] = acc[n.lat] || {})[n.lng] = n, acc), {}))
.map(Object.values)
);
const result = Array.from(new Set(arr.map(JSON.stringify)), JSON.parse);
const unique = (arr, keys) =>
arr.filter((n, i, a) => i === a.findIndex(m => keys.every(k => n[k] === m[k])));
const result = unique(arr, [ 'lat', 'lng' ]);
[...document.querySelector('ul').children]
.map(n => ({ el: n, text: n.querySelector('.link').innerText }))
.sort((a, b) => a.text.localeCompare(b.text))
.forEach(n => n.el.parentNode.append(n.el));
const arr = [6,4,4.5,3.5,5.5,3,6.5];
const middle = [...arr].sort((a, b) => a - b)[arr.length / 2 | 0];
const blockSelector = '.block';
const buttonSelector = '[data-class]';
const activeClass = 'active';
const blocks = document.querySelectorAll(blockSelector);
const buttons = [...document.querySelectorAll(buttonSelector)];
const classes = buttons.map(n => n.dataset.class);
document.body.addEventListener('click', e => {
const button = e.target.closest(buttonSelector);
if (button) {
blocks.forEach(n => {
n.classList.remove(...classes);
n.classList.add(button.dataset.class);
});
buttons.forEach(n => n.classList.toggle(activeClass, n === button));
}
});
$('ul').click(function(e) {
e.stopPropagation();
const $li = $(e.target).closest('li');
if ($li.length) {
$li.children('ul').toggle();
$li.siblings().children('ul').hide();
}
}).find('ul').hide();
$('.new-game') добавляется динамически на страницу
.new-game
в тот момент, когда вы его пытаетесь получить.Хотелось бы сделать универсальную функцию, чтобы можно было передавать в неё элемент...
body
анимируйте .wrapper
:$('.vertical').on('click', 'a', function(e) {
e.preventDefault();
const id = $(this).attr('href');
const $wrapper = $('.wrapper');
const offset = $(id).offset().top;
const scrollTop = offset + $wrapper.scrollTop();
$wrapper.animate({ scrollTop }, 1500);
});
const div = document.createElement('div');
div.innerHTML = str;
const arr = Array.from(div.children, n => n.innerText);
const arr = Array.prototype.map.call(
new DOMParser().parseFromString(str, 'text/html').body.children,
n => n.textContent
);
const arr = [];
for (const n of document.createRange().createContextualFragment(str).children) {
arr.push(n.innerHTML);
}
const selector = '.text_size';
const maxlen = 3;
$(selector).text((i, text) => {
return text.length > maxlen ? text.slice(0, maxlen) + '...' : text;
});
const reg = RegExp(`(.{${maxlen}}).+`);
for (const n of document.querySelectorAll(selector)) {
n.textContent = n.textContent.replace(reg, '$1...');
}
<input id="lower" type="number" value="100">
<input id="upper" type="number" value="200">
const lower = document.querySelector('#lower');
const upper = document.querySelector('#upper');
lower.addEventListener('input', function() {
this.value = Math.min(this.value, upper.value);
});
upper.addEventListener('input', function() {
this.value = Math.max(this.value, lower.value);
});
Можно сделать проверку после нажатия enter?
updateValueOnEnter(lower, val => Math.min(val, upper.value));
updateValueOnEnter(upper, val => Math.max(val, lower.value));
function updateValueOnEnter(input, f) {
input.addEventListener('keypress', ({ key, target: t }) => {
if (key === 'Enter') {
t.value = f(t.value);
}
});
}
в таблице рекордов (которую заполнял вручную автор по запросам на почту) были люди, выполнившие эту задачу за 1 символ. Вопрос: какой это был символ или как иначе они это сделали?