1

Всем привет! Хочу сделать всплывающее окно, которое всплывает в рандомном интервале и закрывается спустя 10 секунд. Рандомный интервал и getElementById я настроил, но не могу понять как настроить, чтобы оно закрывалось и открывалось снова через рандомный интервал и функции повторялись до бесконечности.

function randRange(data) {
       var newTime = data[Math.floor(data.length * Math.random())];
       return newTime;
}
function toggleSomething() {
       var timeArray = new Array(2000, 3000, 1000, 1500);
       clearInterval(timer);
       timer = setInterval(toggleSomething, randRange(timeArray));
var values = ["value1","value2","value3"],
            valueToUse = values[Math.floor(Math.random() * values.length)];
    var app = ["результат","попытка","решение"],
        Value2 = app[Math.floor(Math.random() * app.length)];
document.getElementById("test").innerHTML = (Value2);
document.getElementById("test2").innerHTML = (valueToUse);
}
var timer = setInterval(toggleSomething, 1000);
<div style="
    position:fixed;
    bottom:0;
    left:0;
    margin-bottom: 20px;
    margin-left : 5px;
    width: 200px;
    height: 100px;
    border-style: solid;
    border-width: 1px;
    border-color:#008000;">
  <div id="test" align="center" style="padding:20px"></div>
<strong><div id="test2" align="center" style="font-size: 18"></div></strong>
</div>

3
  • Я ничего не понял.
    – user176262
    18 мар 2021 в 14:53
  • Достаточно заменить setInterval на setTimeout, и добавить вызов его при закрытии, чтобы запустилось открытие
    – Grundy
    18 мар 2021 в 14:54
  • @Grundy пробовал, не помогает. Видимо нужно было делать изначально не getElementById а pop-up или window.
    – Taha
    18 мар 2021 в 15:30

1 ответ 1

1

В общем виде, решение примерно такое:

(function loop() {

  toggle_modal();
  // Нужна функция, которая при каждом вызове покажет или скроет окно.
  
  setTimeout(loop, случайное_время);
  // Через N времени функция loop должна вызываться снова и зациклиться

})(); // <-- функция сразу же вызывается()

Ваш случай можно организовать так:

const modal = {

  data: {
    val: ["value1", "value2", "value3"],
    msg: ["результат", "попытка", "решение"],
  },

  elem: document.querySelector(".modal"),
  node_1: document.querySelector(".modal .line-1"),
  node_2: document.querySelector(".modal .line-2"),
  
  /*** Внутри функций, this — ссылка на объект modal */
  toggle: function() {
    let is_open = this.elem.classList.toggle("open"); // true, если класс добавился.
    if (is_open) this.show_rand_data();
  },
  
  show_rand_data: function() {
    this.node_1.textContent = rand_elem(this.data.val);
    this.node_2.textContent = rand_elem(this.data.msg);
  },

};

/***/
let time = [1000, 1500, 2000, 3000];

(function loop() {
  modal.toggle();
  setTimeout(loop, rand_elem(time));
})();

/***/
function rand_elem(arr) {
  return arr[Math.random() * arr.length | 0];
  // Операция |0 ничего не делает, но отбрасывает дробную часть числа
}
/* Google → CSS */

.modal {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  
  width: 200px;
  height: 100px;  
  margin: 0 0 20px 5px;
 
  border: 1px solid #080;
}

.modal.open {
  display: block;
}

.line-1 {
  text-align: center;
  padding: 20px;
}

.line-2 {
  text-align: center;
  font-size: 18px;
}
<div class="modal">
  <div class="line-1"></div>
  <div class="line-2"></div>
</div>

[1000, 1500, 2000, 3000] если бы у вас там был 2500... можно выкинуть массив и получать такие числа через 1000 + 500 * (Math.random() * 4 | 0)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.