29.03.2018, 21:57
|
|
Интересующийся
|
|
Регистрация: 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 запуском
});
|
|
29.03.2018, 22:16
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
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.
|
|
29.03.2018, 22:48
|
|
Интересующийся
|
|
Регистрация: 29.03.2018
Сообщений: 13
|
|
|
Человеческое Вам Спасибо
 Подскажите пожалуйста Как здесь сделать чтоб блок плавно выезжал с низу и заезжал обратно анимацией можно сделать ? |
|
29.03.2018, 23:40
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,109
|
|
|
Сообщение от kseosru
|
|
чтоб блок плавно выезжал с низу
|
добавлено ... учите не только js, но и css. |
|
29.03.2018, 23:49
|
|
Интересующийся
|
|
Регистрация: 29.03.2018
Сообщений: 13
|
|
|
Спасибо большое
Спасибо большое вы очень мне помогли |
|
30.03.2018, 01:07
|
|
Интересующийся
|
|
Регистрация: 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 запуском
});
|
|
30.03.2018, 01:14
|
 |
Профессор
|
|
Регистрация: 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.
|
|
30.03.2018, 01:29
|
|
Интересующийся
|
|
Регистрация: 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 запуском
});
|
|
30.03.2018, 01:36
|
|
Профессор
|
|
Регистрация: 01.12.2016
Сообщений: 3,650
|
|
10-ая строка
window.setTimeout(c, rnd(5000,9000));
|
|
|
|
