getElementById с таймером

Question

Всем привет! Хочу сделать всплывающее окно, которое всплывает в рандомном интервале и закрывается спустя 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>

Answer 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)

БЛОГ НА HUSL

getElementById с таймером

Ответы (1 шт):