Помогите настроить задержку скрипта

Тема в разделе "JavaScript", создана пользователем Apppxu, 16 ноя 2017.

Модераторы: ZiX
  1. Apppxu

    Apppxu Постоялец

    Регистр.:
    2 апр 2013
    Сообщения:
    64
    Симпатии:
    5
    Сам код выводит всплывающее окно. Как мне сделать чтобы это окно выезжало через 10 сек, через 10 сек заезжало обратно и спустя 180 сек выезжало снова на 10 сек и больше не выезжало пользователю этой сессии
    Код:
    <style>
    .ras1,.ras3{
    cursor: pointer;
    }
    .ras_show{
    display:none;
    }
    media media screen and (max-width: 767px) {
    .ras1,.ras3{
    display:none!important;
    }
    .ras_show{
    display:inline;
    bottom: -5px;
    z-index: 9999999;
    color: white;
    position: fixed;
    }
    }
    </style>
    
    <?php if(!$raccrochka || (isset($_SERVER["HTTP_REFERER"]) && $_SERVER['HTTP_REFERER'] != "http://belarussian-dveri.ru/raccrochka.html") && !isset($_COOKIE['exit1'])){?>
    <div onclick='document.location.href ="raccrochka";'
    class="rassrochka_img ras1" id="rassrochka_img" style="top:182px;left:-500px;">
    <img src="/image/rassrochka2.png">
    <img src="/image/exit.png" id="exit" onclick='var date = new Date; date.setDate(date.getDate() + 1); document.cookie = "exit1=10";'>
    
    </div>
    
    <script>
    setTimeout(function(){
    $(".ras1").css('left','0px');
    setTimeout(function(){
    $(".ras1").css('left','-200px');
    $(".ras1 img").remove();
    $(".ras1").css('left','-16px');
    $(".ras1").append('<img src="/image/rassrochka3.png" width="70px">');
    }, 3000);
    }, 30000);
    
    </script>
    
    <?php } else if(!$raccrochka) { ?>
    <div onclick='document.location.href ="raccrochka";'
    class="rassrochka_img ras3" id="rassrochka_img" style="top:14%;left:52px;color:white;">
    <img src="/image/rassrochka3.png" width="70px" >
    
    </div>
    <?php } ?>
     
  2. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    464
    Симпатии:
    302
    Возможно, вот так:
    HTML:
    var intervals = [10000, 10000, 180000, 10000]; // через какие промежутки запускать
    
    var leftPosition = -200; // позиция
    
    function runByPeriod(){
      leftPosition = leftPosition ? 0 : -200; // переключатель 0/-200
      $(".ras1").css('left',leftPosition); // чё-то делаем
      if(intervals.length !== 0){ // если массив не пустой
        setTimeout(runByPeriod, intervals.shift()); // рекурсивный запуск со сдвигом массива
    } else { // иначе
        sessionStorage.setItem('stop_popup', '1'); // пишем в хранилище сессии значение
    }
    }
      if(sessionStorage.getItem('stop_popup') != '1'){ // если в хранилище сессии значения нет
        setTimeout(runByPeriod, intervals.shift()); // первый запуск
      }
    
     
    Apppxu нравится это.
  3. alex_me

    alex_me

    Регистр.:
    25 янв 2017
    Сообщения:
    156
    Симпатии:
    104
    Код:
    var tl = new TimelineLite();
    var popup = '.MyCrazyPopupWindow';
    
    tl.to(popup, 0.5, {left: 0}, "+=10.0");
    tl.to(popup, 0.5, {left: -500px}, "+=10.0");
    tl.to(popup, 0.5, {left: 0}, "+=180.0");
    tl.to(popup, 0.5, {left: -500px}, "+=10.0");
    
    tl.play();
    play нужно само собой привязать к какому-нибудь событию - кнопке или загрузке документа.

    https://greensock.com/learning
     
  4. Apppxu

    Apppxu Постоялец

    Регистр.:
    2 апр 2013
    Сообщения:
    64
    Симпатии:
    5
    Подскажите еще пожалуйста как правильно и куда это вставить.
     
  5. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    464
    Симпатии:
    302
    Это же ведь Opencart? Обычно есть js-файл темы, куда пишут разные инициализации плагинов, собственную js-логику и т.д. Лучше код добавить в секцию калбека для ивента ready или в анонимную функцию, а в остальном принципиальной разницы нет.
     
  6. Apppxu

    Apppxu Постоялец

    Регистр.:
    2 апр 2013
    Сообщения:
    64
    Симпатии:
    5
    Да, опенкарт. Добавил в коммон.js - не работает. Я не силен в яве и программировании и пока до конца не могу понять как правильнее это сделать, сам алгоритм дейсвия скрипта мне не понятен до конца.. Если не трудно ткните меня носом в нужное место
     
  7. alex_me

    alex_me

    Регистр.:
    25 янв 2017
    Сообщения:
    156
    Симпатии:
    104
    Попробуй поместить это в document ready:

    Код:
    $(function() {
    
       // здесь твой код, который запустится после загрузки страницы.
    
    });
    См. также в js-консоль браузера. Если в коде ошибка, увидишь какая именно
     
  8. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    464
    Симпатии:
    302
  9. apostos

    apostos Создатель

    Регистр.:
    6 ноя 2017
    Сообщения:
    21
    Симпатии:
    5
    Если посмотреть по теории вас интересует функция setTimeout. Почитайте мануалы по использованию их миллион. А если конкретно куда, в ваш пример вставляете код со второго поста мистера Absolute c небольшими поправками и вуаля.
     
  10. passwd

    passwd Создатель

    Регистр.:
    12 апр 2017
    Сообщения:
    14
    Симпатии:
    1
    Еще, чтобы просто быстро проверить код, можно вставлять его просто в адресную строку браузера вместо ссылки в таком виде:

    Код:
    javascript:(function(){ ...твой код... })();
    Это называется Bookmarklet. Можешь даже в закладки добавить, чтобы быстро проверть всякие cookies и т.д.