Ответы пользователя по тегу JavaScript
  • JSON для подгрузки фотографии на лендинг при нажатие на кнопке хорошое практика?

    @lolzqq
    HTML,CSS,JS,PHP
    JSON - текстовый формат обмена данными, основанный на JavaScript

    Про подгрузку фотографии на лендинг:
    Загрузите её сразу в блок со стилем display:none. А по нажатию на кнопке поменяйте стиль блока или скопируйте аттрибут src в нужную фотографию.
    Ответ написан
    Комментировать
  • Как запретить нажимать на блок если происходит анимация?

    @lolzqq
    HTML,CSS,JS,PHP
    Перед началом анимации подвесьте глобальный флаг, например window.block_id_block=true;
    По окончании анимации снимайте флаг window.block_id_block=false;
    А внутри $("#block_log").click(function(){... проверяйте window.block_id_block - если false - то можно анимировать

    Всё через колбэки функций реализуется.
    Ответ написан
    Комментировать
  • Почему скрипты выполняются в таком порядке?

    @lolzqq
    HTML,CSS,JS,PHP
    Браузер сначала скачивает и выполняет первый, а потом - второй. Поменяйте их местами - будет наоборот.

    Если оформите так:
    <script>
        async function a(){console.log('hi');}
        async function b(){new Promise(resolve => {
             for(let i = 0; i <= 1; i++) {
                  if(i === 1) resolve(i)
             }
         }).then((res) => console.log(res));}
    b();
    a();
    </script>

    То сперва выполнится функция с console.log('hi'), а только потом функция с console.log(res);
    Ответ написан
    Комментировать
  • Как обратно включить событие scroll?

    @lolzqq
    HTML,CSS,JS,PHP
    Синтаксис метода bind:
    .bind( eventType [, eventData ], handler(eventObject) )
    подразумевает помимо установки типа прослушивателя событий ещё и настройку обработчика событий.

    В вашем случае в блоке кода:
    complete: function(){
          $(window).bind('scroll');  //включаем событие
    }

    надо дописать ваш .bind примерно так:
    complete: function(){
          $(window).bind('scroll',function(){ /*тут ваши инструкции, что делать при скролле, например addNews();*/ });  //включаем событие
    }
    Ответ написан
    Комментировать
  • Как взять текст из title ссылки?

    @lolzqq
    HTML,CSS,JS,PHP
    Element.getAttribute()
    getAttribute() возвращает значение указанного атрибута элемента. Если элемент не содержит данный атрибут, могут быть возвращены null или "" (пустая строка);

    <!doctype html>
    <html lang="ru">
    <head>
      <meta charset="utf-8" />
      <title></title>
      
      <link rel="stylesheet" href="https://unpkg.com/balloon-css@1.0.0/balloon.min.css">
      
      <style type="text/css">
    	body{
    		width:100%;
    		height:100;
    		position:relative;
    		display:flex;
    	}
    	.custom_link{
    		margin: 5%;
    		width: 20%;
    		display:block;
    		position:relative;
    		text-align:center;
    		float:left;
    	}
      </style>
    </head>
    <body>
    
    <a class="custom_link" href="#" title="Текст заголовка 1">Ссылка 1</a>
    <a class="custom_link" href="#" title="Текст заголовка 2">Ссылка 2</a>
    <a class="custom_link" href="#" title="Текст заголовка 3">Ссылка 3</a>
    <a class="custom_link" href="#" title="Текст заголовка 4">Ссылка 3</a>
    
    <script>
    let links_array=document.querySelectorAll('.custom_link'); // выбираем все блоки/ссылки или что-то ещё, что имеет класс .custom_link
    let attr_text=''; // в эту переменную будем собирать аттрибут title
    if(links_array.length>0){ // если найден хотя бы 1 подходящий элемент (мы искали .custom_link) то
    	links_array.forEach(function(item,i,array){ // перебираем циклом все найденные элементы
    		attr_text=item.getAttribute('title'); // забираем текст аттрибута title из .custom_link
    		item.setAttribute('aria-label',attr_text); // добавляем к нашему элементу аттрибут 'aria-label' со значением attr_text
    		item.setAttribute('data-balloon-pos','up'); // добавляем к нашему элементу аттрибут 'data-balloon-pos' с указанием, что подсказка рисуется сверху (значение 'up')
    		item.removeAttribute('title'); // удаляем аттрибут title - чтобы не отображалась подсказка по-умолчанию
    	})
    }
    </script>
     
    </body>
    </html>

    Работает:
    604888fd6dc11164209215.jpeg
    Ответ написан
  • Как создать переменную, значение которой не меняется после перезагрузки страницы?

    @lolzqq
    HTML,CSS,JS,PHP
    Вам надо эту переменную записать в cookie или в localstorage, а при визите на страницу проверять наличие куки или хранилища и считывать данные
    Ответ написан
    Комментировать
  • После завершении игры все действия отменялось (Hangman game)?

    @lolzqq
    HTML,CSS,JS,PHP
    К вашему document.addEventListener('keydown', (e) => {... нужно добавить условие, проверяющее - закрыто модальное окно или нет, например, через проверку свойства display.
    Ответ написан
  • Как решить такую проблему?

    @lolzqq
    HTML,CSS,JS,PHP
    Опечатка у вас
    строка 1 var inventor = 0;
    строка 10 inevntor = 1;
    строка 15 inevntor = 0;
    Ответ написан
    1 комментарий
  • Как сделать навигацию?

    @lolzqq
    HTML,CSS,JS,PHP
    У аааа.team ничего не скачет. Делайте как у них.

    P.S. У вас тоже ничего не скачет. Ведь мы не видим.
    Ответ написан
  • Как перезагрузить страницу при выборе select?

    @lolzqq
    HTML,CSS,JS,PHP
    Вне зависимости от того, какую опцию внутри select выберет пользователь - страница перезагрузится после того, как пользователь поменяет опцию с исходной на другую.
    <!doctype html>
    <html lang="ru">
    <head>
      <meta charset="utf-8" />
      <title></title>
    </head>
    <body>
    	<select id="select">
    		<option value='1'>1</option>
    		<option value='2'>2</option>
    	</select>
    <script>
    let el=document.querySelector('#select');
    el.addEventListener('change', function(){
    		document.location.reload();
    	}
    });
    </script>
    </body>
    </html>
    Ответ написан
    Комментировать
  • Есть ли готовые плагины которые могут рендерить слайды вот так?

    @lolzqq
    HTML,CSS,JS,PHP
    Ответ написан
    Комментировать
  • Как отправить данные из php в js?

    @lolzqq
    HTML,CSS,JS,PHP
    Эта часть js скрипта обрабатывает содержимое страницы, на которую вы отправили данные.
    Переменная data и есть содержимое вашей php страницы
    success: function(data) {
          alert(data);
          $('#sendReg').prop('disabled', false);
        }

    А в PHP что напечатаете с помощью оператора echo - то ваш js и получит
    $emailData = 'Уже зареган';
    echo $emailData;


    Фактически вы получаете текст, а дальше сами думаете, что с ним делать.
    Ответ написан
    Комментировать
  • Как сделать анимацию появления svg при наведении на блок?

    @lolzqq
    HTML,CSS,JS,PHP
    На CSS можно сделать, если вам нужны простые смещения
    /*для блоков, которые будут у вас выкатываться задаёте такой стиль:*/
    /*изначальные позиции анимации*/
    .services-content__imege-container .oval-1{
       position:absolute;
       left: /*изначальная позиция*/;
       top: /*изначальная позиция*/;
       width: /*ширина блока*/;
       height: /*высота блока*/;
       transition: all .5s; /*длительность анимаций всех свойств 0.5 секунды*/
    }
    .services-content__imege-container .oval-2{
       position:absolute;
       left: /*изначальная позиция*/;
       top: /*изначальная позиция*/;
       width: /*ширина блока*/;
       height: /*высота блока*/;
       transition: all .5s; /*длительность анимаций всех свойств 0.5 секунды*/
    }
    /*обязательно сделайте position:relative для родителя анимируемых блоков*/
    .services-content__imege-container{
       position:relative; {/*это чтобы анимируемые блоки позиционировались относительно родителя*/}
    }
    /*конечные позиции анимации блоков*/
    .services-content__imege .services-content:hover__imege-wrapper .services-content__imege-container .oval-1{
          left: /*конечная позиция*/;
          top: /*конечная позиция*/;
    }
    .services-content__imege:hover .services-content__imege-wrapper .services-content__imege-container .oval-2{
          left: /*конечная позиция*/;
          top: /*конечная позиция*/;
    }/*...
    ...и аналогично остальные анимируемые объекты*/

    С помощью свойства transition вы можете анимировать ещё opacity (прозрачность), ширину, высоту, box-shadow, color и background-color

    P.S. а почему imege_container, а не image_container ?)
    Ответ написан
    Комментировать
  • Почему выводится 12?

    @lolzqq
    HTML,CSS,JS,PHP
    В первом случае вы отслеживаете все итерации, которые подошли по условию выполнения цикла (b<12)
    b=10, b=10+1, b=10+1
    Во втором случае вы отслеживаете результат последней итерации (из-за которой цикл завершился)
    b=10+1+1

    -Первый круг: цикл сперва берёт b=10 , сравнивает с условием b<12, затем выполняет инструкцию в фигурных скобках, и после этого делает b++
    -Второй круг: цикл берёт уже b=11, сравнивает с условием b<12, затем выполняет инструкцию в фигурных скобках, и после этого снова делает b++
    -Третий круг: цикл берёт b=12, сравнивает с условием b<12, и понимает, что пора закончить работу.

    Это работает,как бесконечный вложенный if(){}
    let b=10;
    if(b<12){
       console.log(b);
       b++;
       if(b<12){
          console.log(b);
          b++;
          if(b<12){
             console.log(b);
             b++;
             if... // и так далее
          }
       }
    }
    Ответ написан
    Комментировать
  • Как изменить цвет svg иконки в кнопке?

    @lolzqq
    HTML,CSS,JS,PHP
    Для контейнера svg добавьте стиль svg:hover{color: white;} , как в примере
    <style type="text/css">
    svg:hover{
       color:white;
    }
    </style>
    
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-alarm" viewBox="0 0 16 16" style="color: black;">
      <path d="M8.5 5.5a.5.5 0 0 0-1 0v3.362l-1.429 2.38a.5.5 0 1 0 .858.515l1.5-2.5A.5.5 0 0 0 8.5 9V5.5z"></path>
      <path d="M6.5 0a.5.5 0 0 0 0 1H7v1.07a7.001 7.001 0 0 0-3.273 12.474l-.602.602a.5.5 0 0 0 .707.708l.746-.746A6.97 6.97 0 0 0 8 16a6.97 6.97 0 0 0 3.422-.892l.746.746a.5.5 0 0 0 .707-.708l-.601-.602A7.001 7.001 0 0 0 9 2.07V1h.5a.5.5 0 0 0 0-1h-3zm1.038 3.018a6.093 6.093 0 0 1 .924 0 6 6 0 1 1-.924 0zM0 3.5c0 .753.333 1.429.86 1.887A8.035 8.035 0 0 1 4.387 1.86 2.5 2.5 0 0 0 0 3.5zM13.5 1c-.753 0-1.429.333-1.887.86a8.035 8.035 0 0 1 3.527 3.527A2.5 2.5 0 0 0 13.5 1z"></path>
    </svg>
    Ответ написан
    Комментировать
  • Автоматизирован ли фильтр товаров в интернет магазинах?

    @lolzqq
    HTML,CSS,JS,PHP
    Делается универсальная функция, в которую передаётся название категории, а на выходе отдаётся список подошедших товаров. Вовсе не обязательно плодить десятки функций, выполняющих одно и то же.

    На нажатие кнопки фильтра для определённой категории (или переключении селектора или что там у вас для этого сделано...) получаем из аттрибута, например filter="" название категории/метки для поиска и загоняем в универсальную функцию, которая будет делать запрос.
    function func(category){
       // делаем запрос на сервер для выдачи товаров по категории category
       // получаем ответ
       result = ответ, полученный от сервера;
       return result;
    }
    var a=func('smartphones');
    var b=func('tv');
    Ответ написан
    Комментировать
  • Как обернуть мой код в класс?

    @lolzqq
    HTML,CSS,JS,PHP
    Это называется создать объект JavaScript.
    window.my_custom_object={
        init:function(){ 
             // ваши инструкции
             alert('Скрипт работает!') // для теста можете оставить
        },
        another_function:function(){
            // ещё один метод объекта с вашими инструкциями
            alert('Второй скрипт тоже работает!'); // для теста можете оставить
        },
        parameter_1: "abc",
        parameter_2: 1
    }
    // вызываем метод init, прописанный в объекте
    my_custom_object.init();
    // вызываем метод another_function, прописанный в объекте
    my_custom_object.another_function();
    // вызываем параметр parameter_1, хранимый в объекте
    alert(my_custom_object.parameter_1) // покажет вам текст "abc"
    // вызываем параметр parameter_2, хранимый в объекте
    alert(my_custom_object.parameter_2) // покажет вам текст "1"

    Правда от этого этот код из глобальной области никуда не денется.
    Ответ написан