Блог

У меня есть рабочий код с 3 разделениями, в которых изображения отображаются последовательно за 10 секунд, 20 секунд, 30 секунд. Код работает нормально, но мне нужно как-то рандомизировать порядок, поэтому НЕ всегда pic1 отображается за 10 секунд, pic2 отображается за 20 секунд, а pic3 отображается за 30 секунд. Я хочу рандомизировать порядок изображений, чтобы при каждой загрузке страницы изображения имели разный порядок. Например, pic2 может быть показан первым за 10 секунд, затем становится pic3 за 20 секунд, а затем становится pic1 за 30 секунд. И мне нужна помощь в этом. Вот мой код:

 <div id="wait10sec" style="visibility: hidden">
<img src="pic1.png">  
</div>

<div id="wait20sec" style="visibility: hidden">
<img src="pic2.png">  
</div>

<div id="wait30sec" style="visibility: hidden">
<img src="pic3.png">  
</div>


<script>
function showIt() {
  document.getElementById("wait10sec").style.visibility = "visible";
}
setTimeout("showIt()", 10000);
</script>


<script>
function showIt() {
  document.getElementById("wait20sec").style.visibility = "visible";
}
setTimeout("showIt()", 20000);
</script>


<script>
function showIt() {
  document.getElementById("wait30sec").style.visibility = "visible";
}
setTimeout("showIt()", 30000);
</script>
  

Давайте изменим ваш код для работы с перетасованным массивом идентификаторов [pic1, pic2, pic3] и соответствующим образом изменим HTML.

 shuffle(['pic1', 'pic2', 'pic3']).forEach((id, index) => {
  setTimeout(_ => {
    document.getElementById(id).style.visibility = "visible";
  }, (index   1) * 10000);
});


function shuffle(arr) {
  if(!arr.length) return [];
  const index = 0|(Math.random() * arr.length);
  return [
    arr[index],
    ...shuffle([...arr.splice(0, index), ...arr.splice(1)])
  ];
}  

 <div id="pic1" style="visibility: hidden">
  <img src="pic1.png">
</div>

<div id="pic2" style="visibility: hidden">
  <img src="pic2.png">
</div>

<div id="pic3" style="visibility: hidden">
  <img src="pic3.png">
</div>  

Вы можете использовать div id случайную внутреннюю showIt() функцию в каждом интервале. Простой обходной путь может быть:

 <script>
var ran_num = Math.floor(Math.random() * 3);
var my10secElem = "wait"   (ran_num   % 3   1)   "0sec";
var my20secElem = "wait"   (ran_num   % 3   1)   "0sec";
var my0secElem = "wait"   (ran_num   % 3   1)   "0sec";

function showIt() {
  document.getElementById(my10secElem).style.visibility = "visible";
}
setTimeout("showIt()", 10000);

function showIt2() {
  document.getElementById(my20secElem).style.visibility = "visible";
}
setTimeout("showIt2()", 20000);

function showIt3() {
  document.getElementById(my30secElem).style.visibility = "visible";
}
setTimeout("showIt3()", 30000);
</script>