Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 29.03.2018, 21:57
Интересующийся
Отправить личное сообщение для kseosru Посмотреть профиль Найти все сообщения от kseosru
 
Регистрация: 29.03.2018
Сообщений: 13

Как сделать повторное воспроизведение js скрипта ?
Добрый день . Помогите пожалуйста решить один вопрос. Есть код ниже, он показывает через определенное время блоки DIV как уведомления. После последнего блока DIV скрипт завершает работу и останавливается .

Вопрос в том, как сделать так, что-бы после последнего вывода блока, скрипт отрабатобатывал все действия повторно. То есть
повторял те же действия. Без перерыва ?

Извините если не так поставил вопрос я новичок постарался изложить своими словами.

CSS КОД

Код:
.parent_popup {
position: fixed;
  right: 20px;
  bottom: 0px;
  width: 400px;
 display: none;
 
 }
 .parent_popup.show{
   display: block;
 }

 .popup {
   width: 100%;
  height: 100px;
   background: #f8f8f8;
   
   padding: 6px 10px 10px 10px;
   
box-shadow:0px 0px 14px 4px rgba(113,131,152,0.47);
-webkit-box-shadow:0px 0px 14px 4px rgba(113,131,152,0.47);
-moz-box-shadow:0px 0px 14px 4px rgba(113,131,152,0.47);

  margin: 0 0 20px 0;
  position: relative;
  right: 0;
 border-top-left-radius: 12px;
	border-top-right-radius: 12px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 12px;

   -webkit-border-radius:12px; /* Safari, Chrome */
    -moz-border-radius:12px; /* Firefox */
 
 }

 .close {
 display: none;
 }
 .close:hover {
 display: none;
 }






<div class="parent_popup" >
<div class="popup">
<div class="wrapperks">
Блок 1
</div>
<a class="close"title="Закрыть" >X</a>
</div>
</div>



<div class="parent_popup" >
<div class="popup">
<div class="wrapperks">
Блок 2
</div>
<a class="close"title="Закрыть" >X</a>
</div>
</div>



window.addEventListener("DOMContentLoaded", function() {
    function c() {
        if (a = b.shift()) a.querySelector(".close").addEventListener("click", function(a) {
            a.preventDefault();
            d()
        }), a.classList.add("show"), e = window.setTimeout(d, 1000) //время просмотра
    }
    function d() {	
	
        window.clearTimeout(e);
        a && a.classList.remove("show");
        window.setTimeout(c, 2000) //пауза между показами
    }
    var b = document.querySelectorAll(".parent_popup"),
	
        e, a, b = [].slice.call(b, 0);
		 
    window.setTimeout(c, 1000) //пауза перед 1 запуском	
	
});
Ответить с цитированием
  #2 (permalink)  
Старый 29.03.2018, 22:16
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

kseosru,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
   .parent_popup {
  position: fixed;
  right: 30px;
  bottom: -180px;
  width: 400px;
  transition: 1.2s;

 }
 .parent_popup.show{
   bottom: 5px;
 }
 .popup {
   width: 100%;
  height: 100px;
   background: #f8f8f8;

   padding: 6px 10px 10px 10px;

box-shadow:0px 0px 14px 4px rgba(113,131,152,0.47);
-webkit-box-shadow:0px 0px 14px 4px rgba(113,131,152,0.47);
-moz-box-shadow:0px 0px 14px 4px rgba(113,131,152,0.47);

  margin: 0 0 20px 0;
  position: relative;
  right: 0;
 border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 3px;
  border-bottom-right-radius: 12px;

   -webkit-border-radius:12px; /* Safari, Chrome */
    -moz-border-radius:12px; /* Firefox */

 }

 .close {
 display: none;
 }
 .close:hover {
 display: none;
 }
  </style>
  <script>
window.addEventListener("DOMContentLoaded", function() {
    function c() {
        a = b[i], a.classList.add("show"),i = ++i % b.length, e = window.setTimeout(d, 1000) //время просмотра
    }
    function d() {

        window.clearTimeout(e);
        a && a.classList.remove("show");
        window.setTimeout(c, 2000) //пауза между показами
    }
    var b = document.querySelectorAll(".parent_popup"),

        e, a, b = [].slice.call(b, 0), i = 0;

    window.setTimeout(c, 1000) //пауза перед 1 запуском

});

  </script>
</head>

<body>
<div class="parent_popup" >
<div class="popup">
<div class="wrapperks">
Блок 1
</div>
<a class="close"title="Закрыть" >X</a>
</div>
</div>



<div class="parent_popup" >
<div class="popup">
<div class="wrapperks">
Блок 2
</div>
<a class="close"title="Закрыть" >X</a>
</div>
</div>

</body>
</html>

Последний раз редактировалось рони, 29.03.2018 в 23:37.
Ответить с цитированием
  #3 (permalink)  
Старый 29.03.2018, 22:48
Интересующийся
Отправить личное сообщение для kseosru Посмотреть профиль Найти все сообщения от kseosru
 
Регистрация: 29.03.2018
Сообщений: 13

Человеческое Вам Спасибо
Подскажите пожалуйста Как здесь сделать чтоб блок плавно выезжал с низу и заезжал обратно анимацией можно сделать ?
Ответить с цитированием
  #4 (permalink)  
Старый 29.03.2018, 23:40
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

Сообщение от kseosru
чтоб блок плавно выезжал с низу
добавлено ... учите не только js, но и css.
Ответить с цитированием
  #5 (permalink)  
Старый 29.03.2018, 23:49
Интересующийся
Отправить личное сообщение для kseosru Посмотреть профиль Найти все сообщения от kseosru
 
Регистрация: 29.03.2018
Сообщений: 13

Спасибо большое
Спасибо большое вы очень мне помогли
Ответить с цитированием
  #6 (permalink)  
Старый 30.03.2018, 01:07
Интересующийся
Отправить личное сообщение для kseosru Посмотреть профиль Найти все сообщения от kseosru
 
Регистрация: 29.03.2018
Сообщений: 13

Последний вопрос
Подскажите пожалуйста, вот в коде есть пауза между показами и пауза перед первым запуском. Как эти числа сделать не статическими, а сделать интервал между ними. Чтоб показ был в случайном числе от и до.

например показ от 5000 до 9000
и показ от 7000 до 11000

.setwindowTimeout(c, 9000) //пауза между показами
window.setTimeout(c, 11000) //пауза перед 1 запуском



window.addEventListener("DOMContentLoaded", function() {
    function c() {
        a = b[i], a.classList.add("show"),i = ++i % b.length, e = window.setTimeout(d, 8000) //время просмотра
    }
    function d() {

        window.clearTimeout(e);
        a && a.classList.remove("show");
        .setwindowTimeout(c, 9000) //пауза между показами
    }
    var b = document.querySelectorAll(".parent_popup"),

        e, a, b = [].slice.call(b, 0), i = 0;

    window.setTimeout(c, 11000) //пауза перед 1 запуском

});
Ответить с цитированием
  #7 (permalink)  
Старый 30.03.2018, 01:14
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

var rnd =(min, max)=> Math.floor(Math.random() * (max - min)) + min; // Добавить

window.setTimeout(c, rnd(5000,9000));
window.setTimeout(c, rnd(7000,11000));

Последний раз редактировалось j0hnik, 30.03.2018 в 01:36.
Ответить с цитированием
  #8 (permalink)  
Старый 30.03.2018, 01:29
Интересующийся
Отправить личное сообщение для kseosru Посмотреть профиль Найти все сообщения от kseosru
 
Регистрация: 29.03.2018
Сообщений: 13

Что то я не так сделал
Можете показать куда добавить строку ?
var rnd =(min, max)=> Math.floor(Math.random() * (max - min)) + min; // Добавить



window.addEventListener("DOMContentLoaded", function() {
			var rnd =(min, max)=> Math.floor(Math.random() * (max - min)) + min; // Добавить
    function c() {
        a = b[i], a.classList.add("show"),i = ++i % b.length, e = window.setTimeout(d, 8000) //время просмотра
    }
    function d() {
          
        window.clearTimeout(e);
        a && a.classList.remove("show");
        .setwindowTimeout(c, rnd(5000,9000)); //пауза между показами
    }
    var b = document.querySelectorAll(".parent_popup"),

        e, a, b = [].slice.call(b, 0), i = 0;
		
    window.setTimeout(c, rnd(7000,11000)); //пауза перед 1 запуском

});
Ответить с цитированием
  #9 (permalink)  
Старый 30.03.2018, 01:36
Аватар для j0hnik
Профессор
Отправить личное сообщение для j0hnik Посмотреть профиль Найти все сообщения от j0hnik
 
Регистрация: 01.12.2016
Сообщений: 3,650

10-ая строка

window.setTimeout(c, rnd(5000,9000));
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать рандомное время от 2 до 8 секунд у скрипта? snovapavel jQuery 11 03.10.2016 13:04
Как сделать переход по этой ссылке с помощью js licn87 Events/DOM/Window 7 03.01.2016 16:35
написал коряво плагин на JS - он работает, а как сделать лучше? Теги: Массив, replace alexben Общие вопросы Javascript 2 11.02.2012 15:21
Как сделать как в JQ? faforty Общие вопросы Javascript 8 14.11.2011 01:35
JS классы - как объединить функции в класс olga153b Events/DOM/Window 3 01.11.2011 14:13