Блог

Главная - Вопросы по программированию - Как показать / скрыть div с помощью функции случайной синхронизации

Как показать / скрыть div с помощью функции случайной синхронизации

#javascript #html #css

#javascript #HTML #css

Вопрос:

я ищу, чтобы сделать анимированное видео с ошибками. Я использую 2 видео, чтобы сделать сбой. Один из них полностью сбит с толку, и я просто хочу, чтобы она появлялась или исчезала случайным образом с помощью функции случайной синхронизации с диапазоном времени.

Как можно завершить или перекодировать этот крошечный фрагмент Javascript?

Мне просто нужно сделать показ / скрытие со случайным временем скрытия… показывал максимум 5 секунд и скрывал от 20 до 120 секунд

Пожалуйста, взгляните на код :

 setTimeout(function(){
        document.getElementById('Video1').style.display = 'none';
    }, 3000); // 10000ms = 10 seconds 
 <html>
<head></head>
<body>
<div class="Video1" id="Video1" name="Video1">Video1</div>
<div class="Video2" id="Video2" name="Video2">Video2</div>
</body>
</html>

Ответ №1:

Рекурсия вызовет setTimeout и переключит внешний вид вашего div.

Видео1 будет отображаться с интервалом в 5 секунд. После закрытия он останется таким в течение интервала 20-120 [s], и это будет повторяться бесконечно.

 function callTimeout(isOpen, time) {
  setTimeout(function() {
    if (isOpen) {
      document.getElementById('Video1').style.display = 'none';
      time = (Math.floor(Math.random() * 120)   20) * 1000;
    } else {
      document.getElementById('Video1').style.display = '';
      time = Math.floor(Math.random() * 6) * 1000;
    }
    isOpen = !isOpen;
    callTimeout(isOpen, time);
  }, time);
}

callTimeout(true, Math.floor(Math.random() * 6) * 1000) 
 <html>

  <head></head>

  <body>
    <div class="Video1" id="Video1" name="Video1">Video1</div>
    <div class="Video2" id="Video2" name="Video2">Video2</div>
  </body>

</html>

Комментарии:

1. Спасибо, Евгений, это хорошее начало, видео1 будет исчезать случайным образом, но не будет появляться случайным образом. Можете ли вы прокомментировать параметры времени функции?

2. @Cudex он снова появится, подождите 20-120 секунд, как вы указали. аргументы — это только те интервалы, которые вы хотели.

Ответ №2:

Очень хорошо, большое спасибо вам, Евгений.

У меня есть аргументы modify, чтобы сделать его более динамичным. Это было слишком медленно, чтобы иметь эффект сбоя / отсутствия сбоя.

         function callTimeout(isOpen, time) {
  setTimeout(function() {
    if (isOpen) {
      document.getElementById('Video1').style.display = 'none';
      time = (Math.floor(Math.random() * 4)   1) * 1000;
    } else {
      document.getElementById('Video1').style.display = '';
      time = Math.floor(Math.random() * 2) * 1000;
    }
    isOpen = !isOpen;
    callTimeout(isOpen, time);
  }, time);
}

callTimeout(true, Math.floor(Math.random() * 3) * 1000) 
 <div class="Video1" id="Video1" name="Video1">Video1</div>
<div class="Video2" id="Video2" name="Video2">Video2</div>