Обновление div без перезагрузки страницы
Всем привет! есть popup в котором всплывает: "Виталий купил товар на 100р" этот текст генерируется из списка, который прописан в js так-же есть таймер авто открытия и авто закрытия popup. Мне нужно чтобы этот popup заново генерировался и всплывал еще раз каждые n секунд.
Код рандомайзера текста:
<!-- подключаем jQuery -->
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script>
<!-- подключаем наш скрипт -->
<script>
// шаблон начала письма
var intro = ['$a_intro$'];
// шаблон тела письма
var text = ['$a_text$'];
// шаблон концовки письма
var outro = ['$a_outro$:' + ' $b_outro$'];
// задаём набор фраз и слов для всех шаблонов сразу
var text_obj = {
//структуру письма пока оставляем пустой
structure: [
''
],
// текст для начала
a_intro: ['Emma', 'Noah', 'Harper',
'Abigail',
'Avery',
'Lily',
'Ella',
'Chloe',
'Evelyn',
'Sofia',
'Aria',
'Ellie',
'Aubrey',
'Scarlett',
'Zoey',
'Hannah',
'Audrey',
'Grace',
'Addison',
'Zoe',
'Elizabeth',
'Nora'],
// варианты основного текста
a_text: ['leti***@usgfx.com', 'te***@gmail.com', 'romano**@gmail.com',
'krist***@inbox.lv',
'mohse***[email protected]',
'lelde***@gmail.com',
'plum***@gmail.com',
'serge***@gmail.com',
'Tes***@gmail.com',
'adale***@gmail.com',
'kazda***@gmail.com'],
// текст для концовки
a_outro: ['made a deposit'],
b_outro: ['11$', '54$', '23$', '88$', '102$', '154$', '14$', '132$', '350$', '220$', '140$'],
};
// убираем знаки доллара после замены шаблонного слова на реальный текст
function parse_keywords(string) {
// задаём шаблон поиска таких слов
pattern = /\$\w+\$/g;
// проверяем, есть ли в строке нужные нам слова
keyword = string.match(pattern);
// если есть
if (keyword) {
// пока не закончатся все такие слова в строке…
for (var i = keyword.length - 1; i >= 0; i--) {
// убираем значок доллара
keyword[i] = keyword[i].replace(/\$/g, '');
}
}
// возвращаем слово без знаков доллара
return keyword;
}
// генератор случайных чисел в диапазоне от минимального до максимального
function randz(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// выбираем случайный элемент массива
function randomize(arr) {
return arr[Math.floor(Math.random() * arr.length)];
}
// меняем одно слово на другое
function replace_keyword(source, keyword, variant) {
return (source.replace('$' + keyword + '$', variant));
}
//подставляем случайным образом готовые слова вместо шаблонных слов со знаком доллара
function bake(object) {
// переменная, в которой на выходе получится готовый текст
var result = randomize(object['structure']);
// пока есть шаблонные слова со знаком доллара
do {
// выбираем их
keywords = parse_keywords(result);
// если они точно есть, то
if (keywords) {
// пока они не закончатся
for (var i = keywords.length - 1; i >= 0; i--) {
// случайным образом подставляем вместо шаблонных слов с долларом слова из наборов
if (object.hasOwnProperty(keywords[i])) {
result = replace_keyword(result, keywords[i], randomize(object[keywords[i]]));
}
}
}
} while (keywords);
// возвращаем готовый результат
return result;
}
// собираем письмо в одно целое
function generate_structure() {
// случайным образом определяем тон письма — официальный (0) или неформальный (1)
// результат помещаем в переменную вместе с тегами
result = '<h2>' + intro + '</h1>\n';
result += '<p>' + text + '</p>\n';
result += '<p>' + outro + '</p>\n';
// возвращаем результат — одну строку с HTML-разметкой
return result;
}
// подставляем текст с тегами в нужне место на странице
function send(text) {
document.getElementById('text_here').innerHTML = text;
}
// что мы делаем по нажатию на кнопку
function get_text() {
// заводим переменную для структуры текста
var currentObject = text_obj;
// наполняем структуру текстом с шаблонными словами
currentObject.structure[0] = generate_structure();
// меняем шаблонные слова на нормальный текст
result = bake(currentObject);
// выводим результат
send(result);
}
window.onload = get_text;
</script>
код показа:
// открыть по таймеру
$(window).on('load', function () {
setTimeout(function(){
if($('.js-overlay-campaign').hasClass('disabled')) {
return false;
} else {
$(".js-overlay-campaign").fadeIn();
}
}, 5000);
});
// закрыть по таймеру
$(window).on('load', function () {
setTimeout(function(){
if($('.js-overlay-campaign').hasClass('disabled')) {
return false;
} else {
$(".js-overlay-campaign").fadeOut();
}
}, 8000);
});
Ответы (1 шт):
Автор решения: Rikky
→ Ссылка
Держи
setInterval(showPopup, 5000); //показываем pop-up каждые 5 секунд
function showPopup() { //функция показать pop-up
document.getElementById('popup').style.display = 'block';
setTimeout(hidePopup, 2000); //скрываем pop-up через 2 секунды после того как показали
}
function hidePopup() { //функция скрыть pop-up
document.getElementById('popup').style.display = 'none';
}
#popup { display: none; }
<div id="app">
<div id="popup">Pop-up</div>
</div>