Ответы пользователя по тегу JavaScript
  • Как работать с точными числами в js, decamal?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    tofixed, умножение на 100 и деление. округление все это не подходит.


    А у вас нет других вариантов. В javascript только один числовой тип данных - Number.
    Остается только оперировать денежными величинами в их минимальной целочисленной "разрядности" (копейка, цент и т.д.). В основном все валюты делятся либо на 100 "копеек", либо на 1000, либо вообще не делятся. Привязку к делителю делать через название валюты.
    Вот насчет крипты я хз, как с ней работать.
    Ответ написан
  • Обнаружил подозрительный JS код в header.php, в bitrix cms, на что похоже? Анимация?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Судите сами:

    function resize() {
        const el = document.getElementsByClassName('preloader-wrap')[0];
        let scale = 0 < window.innerWidth - window.innerHeight
                    ? window.innerWidth / 2200
                    : window.innerWidth / 800;
        el.style.transform = 'translate(-50%, -50%) scale(' + scale + ')';
    }
    
    function animAdd(selector, className, timeout) {
        const el = document.getElementsByClassName(selector)[0];
        setTimeout(function () {
            el.classList.add(className);
        }, timeout);
    }
    
    function animRem(selector, className, timeout) {
        const el = document.getElementsByClassName(selector)[0];
        setTimeout(function () {
            el.classList.remove(className);
        }, timeout);
    }
    
    function getRandom() {
        return 10 * Math.round((1500 * Math.random() + 500) / 10);
    }
    
    function animBannerAdd() {
        animAdd('preloader-item1', 'active', getRandom());
        animAdd('preloader-item2', 'active', getRandom());
        animAdd('preloader-item3', 'active', getRandom());
        animAdd('preloader-item4', 'active', getRandom());
        animAdd('preloader-item5', 'active', getRandom());
        animAdd('preloader-item6', 'active', getRandom());
        animAdd('preloader-item7', 'active', getRandom());
        animAdd('preloader-item8', 'active', getRandom());
        animAdd('preloader-item9', 'active', getRandom());
        animAdd('preloader-item10', 'active', getRandom());
        animAdd('preloader-item11', 'active', getRandom());
        animAdd('preloader-item12', 'active', getRandom());
        animAdd('preloader-item13', 'active', getRandom());
        animAdd('preloader-item14', 'active', getRandom());
        animAdd('preloader-item15', 'active', getRandom());
        animAdd('preloader-item16', 'active', getRandom());
        animAdd('preloader-item17', 'active', getRandom());
        animAdd('preloader-item18', 'active', getRandom());
        animAdd('preloader-item19', 'active', getRandom());
        animAdd('preloader-item20', 'active', getRandom());
        animAdd('preloader-item21', 'active', getRandom());
        animAdd('preloader-item22', 'active', getRandom());
        animAdd('preloader-item23', 'active', getRandom());
        animAdd('preloader-item24', 'active', getRandom());
        animAdd('preloader-item25', 'active', getRandom());
        animAdd('preloader-item26', 'active', getRandom());
        animAdd('preloader-item27', 'active', getRandom());
        animAdd('preloader-item28', 'active', getRandom());
        animAdd('preloader-item29', 'active', getRandom());
        animAdd('preloader-item30', 'active', getRandom());
        animAdd('preloader-item31', 'active', getRandom());
        animAdd('preloader-item32', 'active', getRandom());
    }
    
    function animBannerRem() {
        animRem('preloader-item1', 'active', 0);
        animRem('preloader-item2', 'active', 0);
        animRem('preloader-item3', 'active', 0);
        animRem('preloader-item4', 'active', 0);
        animRem('preloader-item5', 'active', 0);
        animRem('preloader-item6', 'active', 0);
        animRem('preloader-item7', 'active', 0);
        animRem('preloader-item8', 'active', 0);
        animRem('preloader-item9', 'active', 0);
        animRem('preloader-item10', 'active', 0);
        animRem('preloader-item11', 'active', 0);
        animRem('preloader-item12', 'active', 0);
        animRem('preloader-item13', 'active', 0);
        animRem('preloader-item14', 'active', 0);
        animRem('preloader-item15', 'active', 0);
        animRem('preloader-item16', 'active', 0);
        animRem('preloader-item17', 'active', 0);
        animRem('preloader-item18', 'active', 0);
        animRem('preloader-item19', 'active', 0);
        animRem('preloader-item20', 'active', 0);
        animRem('preloader-item21', 'active', 0);
        animRem('preloader-item22', 'active', 0);
        animRem('preloader-item23', 'active', 0);
        animRem('preloader-item24', 'active', 0);
        animRem('preloader-item25', 'active', 0);
        animRem('preloader-item26', 'active', 0);
        animRem('preloader-item27', 'active', 0);
        animRem('preloader-item28', 'active', 0);
        animRem('preloader-item29', 'active', 0);
        animRem('preloader-item30', 'active', 0);
        animRem('preloader-item31', 'active', 0);
        animRem('preloader-item32', 'active', 0);
    }
    
    document.addEventListener('DOMContentLoaded', function () {
        resize();
    });
    
    window.onresize = function () {
        resize();
    };
    
    console.log(getRandom());
    
    animBannerAdd();
    
    setInterval(function () {
        animBannerRem();
    }, 3000);
    
    setInterval(function () {
        animBannerAdd();
    }, 3000);
    Ответ написан
    2 комментария
  • Как во встроенном обработчике события передать в функцию строку?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    <button class="minibutton aligh-items-center"
            onmouseover="hoverb(this, '/img/blackheartFill.svg');"
            onmouseout="hoverb(this, '/img/blackheart.svg');"
    >
        <img src="/img/blackheart.svg" alt="">
    </button>


    function hoverb(button, img) {
        button.querySelector('img').setAttribute('src', img );
    }
    Ответ написан
    Комментировать
  • Как вытащить переменнную из подключенного JSON в JS?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    function getData() {
      return new Promise(resolve => {
        $.getJSON("https://www.cbr-xml-daily.ru/daily_json.js", function(data) {
            const kyrs = Math.ceil(100 / data.Valute.KZT.Value * data.Valute.EUR.Value).toString().replace(/(\d)(?=(\d{3})+$)/g, '$1 ');
            resolve(kurs);
        });
      })
    }
    
    function func1(kurs) {
      console.log(kurs);
    }
    
    function func2(kurs) {
      console.log(kurs);
    }
    
    async function go() {
      const kurs = await getData();
      $('#euro').html(kyrs);
      func1(kurs);
      func2(kurs);
    }
    
    go();
    Ответ написан
    Комментировать
  • Как сделать полосу вместо точек у слайдера?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    в простейшем случае стилизовать точки как полоски.
    Ползунок будет не скользить, а переключаться, зато просто.

    Если требуется именно ползунок, то делайте его как угодно, а потом связывайте со слайдом посредством событий https://owlcarousel2.github.io/OwlCarousel2/docs/a...
    Ответ написан
    Комментировать
  • Как объеденить круговой слайдер(диапозон) с полем ввода и кнопками + и -?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    событие update (ну или drug, я в доку не вникал) слайдера - это источник значения при изменении его слайдером. Здесь получаем это значение и вписываем его в input

    метод setValue наоборот устанавливает значение в слайдер

    По событию onchange или oninput на поле ввода вы получаете введенное значение и методом setValue устанавливаете его в слайдер.

    по кнопкам плюс/минус вы не трогаете слайдер. А устанавливаете значение в инпут и триггерите на инпуте событие onchange/oninput (по этому триггеру сработает обновление слайдера).

    то есть у вас почти правильно. только вот эту дичь нужно убрать $input.val = args.value; вообще непонятно, что вы собирались этим сделать.
    Добавить слушатель onchange на инпут
    И немного поправить drug
    Ответ написан
    4 комментария
  • Параметры функцийв JS?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    /**
     * @param {string} text Входная строка, номер карты
     * @param {number} count Количество видимых цифр в конце
     */
    function getHiddenCard(text, count = 4) {
      if (text.length <= count) return text; // нечего скрывать звездами
    
      const visibleDigits = text.slice(-count); // Четыре последние цифры
      const stars = '*'.repeat(text.length - count); // Подсчет нужного кол-ва звезд
    
      return stars + visibleDigits;
    }
    Ответ написан
    Комментировать
  • Как запустить отправку формы?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Я эту библиотеку не использовал, так навскидку:

    Вот у вас прописана отправка сразу по добавлении:

    resumable.on('fileAdded', function (file) { // trigger when file picked
                        showProgress();
                        resumable.upload() // to actually start uploading.
                    });


    Уберите этот код, и отправляйте по клику

    button.addEventListener('click', ()=>{
                        showProgress();
                        resumable.upload() // to actually start uploading.
    });
    Ответ написан
    Комментировать
  • Всегда ли значение margin-[x] полученное через getComputedStyle представлено в единице px?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Всегда в логических пикселях.
    Не только margin, а вообще все размерные свойства (padding, width, height и тд)
    Ответ написан
    3 комментария
  • Как приручить событие "keydown" в браузере?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    1. вешаем на keydown одноразовый обработчик {once: true}
    2. в обработчике на keyup повторяем навешивание одноразового хэндлера на keydown


    Будет срабатывать один раз при нажатии.

    А вообще, если требуется одноразовое срабатывание за одно нажатие, то почему не использовать keypress?
    Ответ написан
    1 комментарий
  • Как повторно изменить значение переменной из URl?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    function update() {
        const urlParams = new URLSearchParams(window.location.search);
        const city = urlParams.get('location_location1');
        const target = document.getElementById('locator_citi');
        const cities = {
            'arzamas'   : 'Арзамас',
            'abakan'    : 'Абакан',
            'almetevsk' : 'Альметьевск',
            'angarsk'   : 'Ангарск',
            'armavir'   : 'Армавир',
            'artjom'    : 'Артём',
            'arhangelsk': 'Архангельск',
            'astrahan'  : 'Астрахань',
            // ...
        };
    
        if (cities[city]) {
            target.innerHTML = cities[city];
        }
    }
    
    window.addEventListener('DOMContentLoaded', update);
    
    document.querySelector('.jobsearch-onsubmit-apilocs')?.addEventListener('click', () => {
        update();
    });
    Ответ написан
    5 комментариев
  • Понимает ли js, что функция вернет promise?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    верните сам промис

    const getData = () => {
      return fetch('адресДаты').then((resp) => {
        resp.json()
      })
      .then((data) => {
        return data.data
      })
    }
    
    getData.then(d => console.log(d));
    Ответ написан
    Комментировать
  • Почему событие onclick срабатывает 2 раза?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    function CLICK() {
      let button = document.querySelectorAll('button');
      if(button.length){ 
        for (let i = 0; i < button.length; i++){
    +     if (!button[i].classList.contains('ok'))
    +       button[i].classList.add('ok');
            button[i].addEventListener('click', function(EVENT){
              console.log(1,button[i]);
            });
    +     }
        }
      }
    }
    CLICK();


    Но лучше подумать о делегировании событий.
    Ответ написан
    4 комментария
  • Как перемещать элемент по клику на кнопки?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    function getCurrentOffset(s) {
      return s.split(",", 2).map((n) => Number(n.replace(/\D/g, "")));
    }
    function right2_m() {
      const box = document.getElementById("box");
      let [left, top] = getCurrentOffset(box.style.transform);
      box.style.transform = `translate(${left+30}px,${top}px)`;
    }
    function bottom2_m() {
      const box = document.getElementById("box");
      let [left, top] = getCurrentOffset(box.style.transform);
      box.style.transform = `translate(${left}px,${top+30}px)`;
    }
    Ответ написан
    Комментировать
  • Как сделать обработку array в js данным образом?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    в цикле по ошибкам

    if(data.error.years[i]) {
        document.getElementById('invalid-year_'+i).innerHTML = '<strong>' + data.error.years[i] + '</strong>';
    }
    Ответ написан
  • Выгрузка JS кода в php, но не просто?

    delphinpro
    @delphinpro Куратор тега PHP
    frontend developer
    <script src="file.php"></script>

    file.php

    <?php
    
    header('Content-Type: text/javascript');
    
    echo 'alert("boom")';
    Ответ написан
    1 комментарий
  • Можно ли ещё сократить код?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Использовать цикл
    const els = [
        ["author", "Author - "],
        ["name", "Name"],
        ["currentTime", "00:00"],
        ["duration", "00:00"],
    ];
    
    els.forEach(el => {
        titleElement.appendChild(
            create({
                el: "span",
                className: el[0],
                text: el[1],
            })
        );
    })


    2

    const els = [
        { el: "span", className: "author",      text: "Author - " },
        { el: "span", className: "name",        text: "Name" },
        { el: "span", className: "currentTime", text: "00:00" },
        { el: "span", className: "duration",    text: "00:00" },
    ];
    
    els.forEach( el => titleElement.appendChild( create(el) ) );


    Update

    А вообще это разнородные элементы. Зачем их по отдельности генерировать. Пусть будет один единственный элемент (компонент) - title. Gecnm у него будет шаблон, и пусть вы будете в этот шаблон передавать данные

    function renderTitle (d) {
     return `
      <div class="title">
        <span class="currentTime">${d.time}</span>
        <span class="author">${d.author}</span> –
        <span class="name">${d.name}</span>
        <span class="duration">${d.duration}</span>
      </div>
      `;
    }
    xxx.insertAdjacentHTML('beforeend', renderTitle({
      author:   'Author - ',
      name:     'Name',
      time:     '00:00',
      duration: '00:00',
    }));
    Ответ написан
    2 комментария
  • Как создать блок галереи где изображения разных размеров должны формироваться в сетку?

    delphinpro
    @delphinpro Куратор тега CSS
    frontend developer
    В самом простом случае вполне подойдет решение "в лоб".
    Проектируете 10 сеток на все случаи количества картинок от 1 до 10.
    На каждый случай описываете грид-сетку.
    Такой вариант не будет учитывать пропорции картинок (альбом/портрет).
    Ответ написан
    Комментировать
  • Как заставить phpstorm видеть alias vite js scss?

    delphinpro
    @delphinpro Куратор тега JavaScript
    frontend developer
    Я не заморачиваюсь, просто создаю отдельный файл, типа webpack.config.IDE.js (название любое, пофиг), в нем прописываю алиасы в формате конфига webpack и скармливаю этот файл IDE. Файл этот в коде не используется, исключительно для шторма. Нормально работает.
    653214300813e849679103.png
    содержимое webpack.config.IDE.js
    /*
     * Этот файл НЕ используется в сборке.
     * Он нужен только для корректного автокомплита в IDE phpStorm.
     * Эта IDE почему-то не работает как следует, при указании реально использующегося
     * файла концигурации, расположенного не в корне проекта (node_modules/laravel-mix/setup/webpack.config.js)
     */
    
    const path = require('path');
    
    module.exports = {
      resolve: {
        extensions: ['*', '.wasm', '.mjs', '.js', '.jsx', '.json', '.vue'],
        alias: {
          'vue$': 'vue/dist/vue.runtime.esm.js',
          '@': path.join(__dirname, 'src'),
        },
      },
    };

    Файл был создан давно для вебпака, но и с Vite прекрасно работает. Собственно его функция всего лишь разрешить алиасы в пути в IDE
    Ответ написан