Ответы пользователя по тегу JavaScript
  • Как узнать, пересекаются ли блок с каким-либо другим с position absolute?

    @ksnk
    Для каждого элемента берем getBoundingClientRect и проверяем, что пересечение существует.
    Извиняюсь, что на jQuery, но смысл, вроде и так понятен.
    $(function(){
      var elements=$('.red,.yellow');
      for(let i=0;i<elements.length;i++){
        let ri=elements.eq(i)[0].getBoundingClientRect();
        for(let j=i+1;j<elements.length;j++){
          let rj=elements.eq(j)[0].getBoundingClientRect();
          console.log(//ri,rj, 
                      Math.max(ri.x,rj.x)<=Math.min(ri.x+ri.width,rj.x+rj.width)
                     &&
                      Math.max(ri.y,rj.y)<=Math.min(ri.y+ri.height,rj.y+rj.height)
                     )
        }
      }
    })
    Ответ написан
    Комментировать
  • Как сделать так, чтобы после открытия новой вкладки в браузере Хром старая вкладка автоматически закрывалась?

    @ksnk
    <a href="#" onclick="setTimeout(function(){window.close()},3000)" target="_blank">xxx1</a>

    Не так ?
    Ответ написан
    Комментировать
  • Как сделать алгоритм победы в больших крестиках-ноликах?

    @ksnk
    Берем 4 направления - [0,-1],[1,-1],[1,0],[1,1], к примеру - [0,-1] - это вверх. Инвертируем все цифры - получаем противоположное [0,1] - вниз.
    Поставили, к примеру крестик.
    Изменяем стартовые координаты на "направление". если там тоже крестик - идем дальше. Если нет - прекращаем.
    Переключаемся на противоположное направление, считаем крестики. Если досчитали до 4-х - победа крестиков.
    Если прошли все направления - отдаем ход. Ну и координатную сетку как-то надо вбить в разметку, например как-то так
    // Создаю клетки 49 клеток с классом "cell"
        for(let i = 1; i <= 49; i++) {
            var x=Math.floor((i-1)/7)+1,y=((i-1)%7)+1;
            area.innerHTML += `<div class='cell' id='id-`+x+`-`+y+`'></div>`
        }
    
        // Отслеживаю клик по клетке и выполняю функцию cellClick()
        const cells = document.querySelectorAll('.cell')
    
        cells.forEach(cell => {
            cell.addEventListener('click', cellClick, false)
        })
    
        // Первый игрок - X
        let player = 'x'
    
        // В функции cellClick() я проверяю занята ли клетка, и если нет, то
        // вставляю в неё текущего игрока.
        function cellClick() {
    
            /**
             * проверяем, что по координатам x,y стоит нужный знак
             *
             * @param x
             * @param y - координаты
             * @param player - крестик
             * @returns {boolean} true - стоит
             */
            function check(x,y,player){
                return document.getElementById('id-'+x+'-'+y).innerHTML==player;
            }
    
            /**
             * считаем количество крестиков(player) от координаты x,y в "направлении" dx,dy
             * @param dx
             * @param dy
             * @param x
             * @param y
             * @param player
             * @returns {number}
             */
            function countit(dx,dy,x,y, player){
                var total=0;
                x+=dx; y+=dy;
                while (x>0 && x<=7 && y>0 && y<=7 ){
                    if(check(x,y,player))
                        total++;
                    else
                        break;
                    x+=dx; y+=dy;
                }
                return total;
            }
    
            if (!this.innerHTML) {
                this.innerHTML = player;
                // so checkit
                var dirs=[[0,1],[-1,1],[-1,0],[-1,-1]],
                    // вычисляем текущие координаты клика
                    m=this.getAttribute('id').match(/id-(\d+)-(\d+)/),
                    // вот они - координаты. Умножение для преобразования строк в числа
                    x=1*m[1], y=1*m[2];
                for(var d=0;d<dirs.length;d++){
                    if(5>1+ // 1 - мы поставили крестик
                        // число крестиков в направлении
                        countit(dirs[d][0],dirs[d][1], x, y, player) +
                        // и инвертированном направлении
                        countit([-dirs[d][0],-dirs[d][1]],x ,y , player)
                    ){
                        // если меньше чем надо для победы - считаем дальше
                        continue;
                    }
                    // если нашли больше 5 крестиков в ряд - победа.
                    alert('Победа '+player);
                    break;
                }
            }
    
            // Меняю игрока, если текущий игрок сходил.
            player = player == "x" ? "o" : "x"
        }
    Ответ написан
    5 комментариев
  • Как в slick-slider реализовать длинный слайд?

    @ksnk
    Наилучшее решение - дать дизайнеру по наглой рыжей морде и объяснить, что слайдер со скроллером - это то еще гуано. Слайдер обязан демонстрироваться сам, без участия пользователя.
    Решение раз - порезать картинку на несколько, разумной длины
    Решение два, если дизайнер оказался сильнее, автоматически, анимацией, скроллировать длинный слайд от начала кадра до конца, за время демонстрации самого слайда. Ставится в метод afterChange слик слайдера. Посчитать размер картинки, размер окна слайда, время демонстрации и анимировать разницу.
    как - то так https://jsfiddle.net/jcoa5L6x/2/
    Ответ написан
    1 комментарий
  • Почему угасает энергия в моделировании "гравитации" в JS?

    @ksnk
    В момент удара по горизонтальной поверхности - sy - максимальна, после чего она инвертируется. И в этот же момент уменьшается. Тоесть каждый удар по плоскости, максимальная скорость убегания становится меньше на G. Просто выведи скорость сразу после инвертирования sy и все сам увидишь
    Ответ написан
    5 комментариев
  • Как получить значение полей формы в Ангуларе из автозаполненой формы?

    @ksnk
    Собирай значения полей не сразу в onload а через таймаут. Автозаполнение - это тоже скрипт, который выполняется после загрузки страницы и ему нужно время.
    Ответ написан
    Комментировать
  • Как составить регулярное выражение?

    @ksnk
    Если нужно регулярки - вот так можно
    let m= document.body.innerHTML.match(/(?=[^>]*name="email")<input[^>]+value="([^"]+)"/is);
    console.log(m[1]);

    Регулярка из 2-х половин. Вторая определяет элемент и выковыривает его value, первая проверяет, что name у этого элемента правильный. Расчет на то, что кавычки всегда будут двойными.
    Через Дом, конечно, лучше. На кавычки закладываться не придется.
    Ответ написан
    Комментировать
  • Как указать московское или серверное время в автоотправке запроса с помощью JS?

    @ksnk
    Что такое - сверхвысокая точность ? С точностью до секунды?
    Как узнать оставшееся время в setTimeout?
    Устанавливает таймер на "точный" интервал. Точность достигается тем, что функция вызывается раз в секунду (интервал настраивается) и корректирует оставшееся до событие время. Реальная точность зависит от нагрузки на компьютер в момент срабатывания таймера.
    Для срабатывания в нужное время нужно указать это время в формате с таймзоной.
    function setMyTimer(_t, interval){
            if(typeof(_t)=='function'){
                _t={main:_t}
            }
            _t.start=Date.now();
            _t.interval=_t.interval||interval;
            _t.log_interval=_t.log_interval || 1000;
    
            function log(){
                const diff=_t.interval - (Date.now() - _t.start);
                if(_t.log)_t.log(diff);
                if(diff>_t.log_interval)
                    setTimeout(log,_t.log_interval);
                else {
                    setTimeout(_t.main,diff<0?1:diff);
                }
            }
    
            setTimeout(log,_t.log_interval);
        }
    
        let AlertTime=new Date('2020-11-18T10:39:00+03:00') ;
    
        setMyTimer(()=>alert('Доставка!'), AlertTime.valueOf()-Date.now());
    Ответ написан
    3 комментария
  • Как написать такой regexp для js?

    @ksnk
    Регулярки по таким идиотским условиям пишутся тупо. Используются маски предварительного просмотра look ahead - (= и (!

    - минимум 7 символов (?=.{7})
    - максимум 64 символа (?!.{65})
    - допускается только латиница - самое идиотское. Требуется уточнение, по немецки, там или иероглифами, значит, можно ? Будем считать, что русские буквы нельзя - (?!.*[ёЁа-я])
    - не должен содержать... - (?!.*[!@#$%^&*? ])
    - нельзя ввести 4 одинаковых символа. Тоже то еще условие... 4 запятые подряд, значит, можно ? Будем считать, что любые 4 подряд нельзя - (?!.*(.)\1\1\1)
    - комбинации qwerty - (?!.*qwert)
    - комбинации 1234 - (?!.*1234)
    - не совпадает со словом password - (?!password$)
    - не должен содержать пробелы (?!.*\s)
    Итого - объединяем и тадамс!
    let reg=/^(?=.{7})(?!.{65})(?!.*[ёЁа-я])(?!.*[!@#$%^&\*\?])(?!.*(.)\1\1\1)(?!.*qwert)(?!.*1234)(?!password$)(?!.*\s).*/i

    Можно обойтись меньшим количеством букв, но стоит ли. Читабельность в этом деле ариважна.

    Второй пример сам сделаешь ?
    Ответ написан
    Комментировать
  • Как отобразить на картах путь (пешком) с одной центральной точки к нескольким другим (в разных) местах одновременно?

    @ksnk
    https://habr.com/ru/post/197448/
    не оно ? Можно несколько раз заставить googlemap нарисовать маршрут движения.
    Если не получится/не понравится - нарисовать все маршруты вручную (google.maps.Polyline), используя координаты из инструментов внизу статьи.
    https://jsfiddle.net/rkme98af/
    Ответ написан
    Комментировать
  • Как добавить красивый попап на гугл карты?

    @ksnk
    Ответ написан
    Комментировать
  • Как рассчитать разницу двух дат в js и чтобы разница часовых поясов не влияла?

    @ksnk
    Вместо странного метода вычисления московского времени, лучше писать вот так
    ...
    var t = Date.parse(endtime) - Date.now();
    ...
    Ответ написан
    Комментировать
  • Как исправить таймер отчета от времени?

    @ksnk
    floor округляет вниз. Так что чуть меньше -1 станет -2. Ну и секунды вполне можно округлять, а не обрезать.
    Ну и лепить еще один таймаут вместо старого как-то неправильно. Можно же и в одном уместится.
    Как нибудь так
    Ответ написан
    Комментировать
  • Прелоадер для сайта?

    @ksnk
    Нужно найти/нарисовать картинку с анимированием открытия двери, и сделать что-то такое
    В примере анимация стартует по наведению мыши, в прелодере лучше добавить правило, применяющее стиль в конце тела прелодера - блок стилей перед < / body > . Или по таймауту на javascript.

    Да, scale будет разумнее, чем установка размера, если картинка в большом увеличении не будет выглядеть коряво. Если картинка рисованная - указать размер в пикселях может быть более правильно.
    Ответ написан
    Комментировать
  • Возможно ли найти промежуточную координату svg path?

    @ksnk
    Mожно "перерисовать" этот svg в canvas ( drawImage или stroke ), если он не там уже нарисован, конечно. Потом выковырять нужную линию шириной 1 (getImageData) и пробежаться по всем точкам, для поиска нефонового цвета.
    Ответ написан
  • Последовательная загрузка картинок с сервера?

    @ksnk
    Можно сначала пометить места для вставки, потом вставить вместо пометки.
    placeholder - помечает место. Нужно проверить, что пустой спан не виден в карусели, иначе его нужно будет заменить на что-то невидимое.
    После загрузки картинки - сконструированный див заменяет placeholder.
    Как нибудь так
    ...
    $each(msg, function(index,value){
        var placeholder=$('<span></span>').appendTo('.carousel-inner');
        $.ajax(
    ...
          if(i==0){
             placeholder.replaceWidth('<div class...
    Ответ написан
    Комментировать
  • Наиболее эффективный способ проверить принадлежность клетки диапазону (карта на 2-мерном массиве)?

    @ksnk
    Там количество подходящих координат ограничено, и сильно меньше количества всех координат карты ? Перечислить сначала все координаты, которые можно выбирать, потом из них выбрать случайную. Для оптимизации этого дела - сгенерировать один раз "маску смещений" - массив смещений от "базовой точки". Итого - случайно выбираем элемент маски, складываем координату с нужной точкой - профит...
    Ответ написан
    Комментировать
  • Как правильнее назначить обработчики события в MVC?

    @ksnk
    Начнем с того, что серверное web приложение и клиентское - они работают в разных условиях и решают разные задачи.
    Серверное - одна точка входа, как правило, текст запроса - текстовое значение, полное управление этой точкой находится у контроллера. Контроллер разруливает прилетевший запрос и либо вызывает дочерние контроллеры или сразу выковыривает данные с помощью моделей и отдает их во view.
    Клиентское приложение имеет КУЧУ точек входа - любой поставленный обработчик событий. Тоесть сначала , если вы настолько любите и уважаете MVC, придется собирать все обработчики в кучу и отдать какому-то контроллеру-роутеру. Тоесть, вместо того, чтобы по клику на элементе тупенько стартовать анимацию на jQuery, приходится кодировать клик в событие, отдавать его контроллеру и ожидать оттуда коллбяк тебе же самому, так как никто не сможет дернуть анимацию кроме тебя... Этот колбяк будет скромно называться рендерингом... :) Не, конечно, в этом подходе тоже есть достаточно очень вкусных фенек, но imho, MVC для клиентского приложения это дань моде и чисто распальцовка...
    Ответ написан
  • Как в цикле из select сделать свой выпадающий список?

    @ksnk
    Нарисуй, какие проблемы...
    let sel=$('.select-wrapper>#select');
    if (sel.length>0){ // если структура уже обрамлена - сюда не попадем
      sel
        .wrap('<div class="select-inner"></div>' )
        .after('<ul class="dropdown-select">'+
           '<input type="text" placeholder="Найти" class="search" id="dropdown-search">'+
           '<div class="dropdown-block">'+
           '</div>'+
        '</ul>');
      let ddblock=$('.select-wrapper .dropdown-block');
    	$('option', sel).each(function(){
    		$('<li class="dropdown-select__item">'+$(this).text()+'</li>').appendTo(ddblock);
    	}
      )
    }
    Ответ написан
    6 комментариев
  • Как решить задачу на тему функции?

    @ksnk
    Третьим параметром функции идет не конечный индекс подстроки, а длина результата. Собственно в этом и ошибка. Переименуй переменную end в len и перепиши работу в паре мест. Ну и лишние проверки можно выкинуть.
    Ответ написан