Скрипт генерация случайных фраз

127
08 сентября 2019, 22:20

Генерация случайных слов, с задержкой по времени, где фраза "НА САЙТЕ ТОЛЬКО" видна изначально, а после счетчика рондомно показывается одна фраза из переченя фраз, что в скрипте.

Требуется цифру-обратный счетчик, заключить в слова "Ждите (здесь обратный отсчет) секунд", пример:

НА САЙТЕ ТОЛЬКО
Ждите 35 секунд

А также задать фразе "Ждите 35 секунд" со счетчиком, класс для CSS настроек. Заранее благодарен.

<script> 
  document.addEventListener('DOMContentLoaded', () => { 
    let easyTimer = (function(words, timer, element) { 
      render = () => element.innerText = timer === 0 ? words[parseInt(Math.random() * words.length)] : timer 
      let interval = setInterval(() => timer-- && 0 === timer ? render() && clearInterval(interval) : render(), 1000) 
      render() 
    })( 
      ['ЯРКИЕ КАРТИНКИ', 'БЕСПЛАТНЫЕ КАРТИНКИ', 'КЛЕВЫЕ КАРТИНКИ'], 
      35, 
      document.querySelector('.rnd-word') 
    ) 
  }) 
</script> 
<div> 
  <div>НА САЙТЕ ТОЛЬКО</div> 
  <div class="rnd-word"></div> 
</div>

Answer 1

document.addEventListener('DOMContentLoaded', () => { 
  (function(words, timer, element) { 
    render = () => { 
      if (timer > 0) 
        element.innerText = `Ждите ${timer} секунд`; 
      else { 
        element.innerText = words[Math.floor(Math.random() * words.length)]; 
        clearInterval(interval); 
      } 
    } 
    let interval = setInterval(() => { 
      timer--; 
      render(); 
    }, 1000); 
    render(); 
  })( 
    ['ЯРКИЕ КАРТИНКИ', 'БЕСПЛАТНЫЕ КАРТИНКИ', 'КЛЕВЫЕ КАРТИНКИ'], 
    3, 
    document.querySelector('.rnd-word') 
  ); 
});
.rnd-word { 
  color: green; 
}
<div> 
  <div>НА САЙТЕ ТОЛЬКО</div> 
  <div class="rnd-word"></div> 
</div>

READ ALSO
Загрузка в расширении хром
javascript

Загрузка в расширении хром

Как в расширении хром скачивать файлы, и если возможно самому формировать файл который скачает пользователь?

 127
Новостная лента (JS CSS HTML)
javascript

Новостная лента (JS CSS HTML)

Не так давно перешел на веб программирование с десктопа

 98
Как работает клиентское кэширование?
javascript

Как работает клиентское кэширование?

Есть определённый AJAX-запрос, который клиенты могут выполнять к серверу любое количество разХочу это исправить и снять немного нагрузку с сервера...

 134
Создание изображения через JS
javascript

Создание изображения через JS

Как в js создаватьpng ,

 132