Как сделать повторное воспроизведение js скрипта ?
Добрый день . Помогите пожалуйста решить один вопрос. Есть код ниже, он показывает через определенное время блоки DIV как уведомления. После последнего блока DIV скрипт завершает работу и останавливается .
Вопрос в том, как сделать так, что-бы после последнего вывода блока, скрипт отрабатобатывал все действия повторно. То есть повторял те же действия. Без перерыва ? Извините если не так поставил вопрос я новичок постарался изложить своими словами. CSS КОД Код:
<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 запуском
});
|
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>
|
Человеческое Вам Спасибо
:thanks: Подскажите пожалуйста Как здесь сделать чтоб блок плавно выезжал с низу и заезжал обратно анимацией можно сделать ?
|
Цитата:
|
Спасибо большое
Спасибо большое вы очень мне помогли :thanks:
|
Последний вопрос
Подскажите пожалуйста, вот в коде есть пауза между показами и пауза перед первым запуском. Как эти числа сделать не статическими, а сделать интервал между ними. Чтоб показ был в случайном числе от и до.
например показ от 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 запуском
});
|
var rnd =(min, max)=> Math.floor(Math.random() * (max - min)) + min; // Добавить window.setTimeout(c, rnd(5000,9000)); window.setTimeout(c, rnd(7000,11000)); |
Что то я не так сделал
Можете показать куда добавить строку ?
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 запуском
});
|
10-ая строка
window.setTimeout(c, rnd(5000,9000)); |
| Часовой пояс GMT +3, время: 16:30. |