Рандобный показ блока при обновлении страницы

@Мигрень · Регистрация: 09.11.2010

Студворк — интернет-сервис помощи студентам

Доброго времени суток

Подскажите как реализовать следующее:
Есть три div блока, как бы его сделать, чтобы при обновлении страницы рандомный блок был видим (допустим display:block), а остальные были display:none?

Единственное дополнение - таких блоков "по три штуки" на странице несколько, поэтому надо чтобы они все при обновлении страницы как-то рандомно показывались

Буду очень благодарен за помощь

KOPOJI · 13.07.2012, 12:32

на php могу написать)

Добавлено через 4 минуты

CSS
1
2
3
<style>
div { display:none; }
</style>

PHP
1
2
3
4
5
6
7
8
9
10
<?php
$lol=rand(1,3);
switch($lol)
{
case 1: $lol = 'display:block;';break;
case 2: $lol2 = 'display:block;';break;
case 3: $lol3 = 'display:block;';break;
default: $lol = '';break;
}
?>

HTML5
1
2
3
<div style="<?=$lol;?>">1</div>
<div style="<?=$lol2;?>">2</div>
<div style="<?=$lol3;?>">3</div>

Добавлено через 10 минут
на js писать больше)

CSS
1
2
3
<style>
div { display:none; }
</style>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
window.onload = function () {
var lol = Math.floor(Math.random() * 3) + 1;
var first=document.getElementById('first');
var second=document.getElementById('second');
var third=document.getElementById('third');
 
switch (lol)
  {
    case 1: first.style.display = 'block';break;
    case 2: second.style.display = 'block';break;
    case 3: third.style.display = 'block';break;
    default: first.style.display = 'block';break;
  }
}
</script>

HTML5
1
2
3
<div id="first">1</div>
<div id="second">2</div>
<div id="third">3</div>

З.Ы. это только один из вариантов, который первым в голову пришел)

@Soldado · 13.07.2012, 14:03

Есть много групп и по три блока в каждой группе. Необходимо чтобы каждый раз (после загрузки) в каждой группе был виден лишь один блок из трёх - случайный в группе и независимый от других групп.
Если правильно понял, то вот средствами jquery.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
$('.groupblock').each(function(){
var numberBlock = sluchay();
$(this).children('div').eq(numberBlock).css('display','block');
});
 
 
function sluchay(){
var MyRND  = Math.random() * 2;
var MyRND = Math.round (MyRND);
return MyRND;
 
}

Стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<style>
.block1, .block2, .block3{
display:none;
width:600px;
height:100px;
}
.block1{
background-color: #12ed49;
}
.block2{
background-color: #0a2df5;
}
.block3{
background-color: #ced22d;
}
 
</style>

И сколько угодно таких вот блоков (только добавляй, скрипт менять не нужно):

HTML5
1
2
3
4
5
<div class="groupblock">
   <div class="block1">11111111 БЛОК 1</div>
   <div class="block2">22222222 Блок 2</div>
   <div class="block3">33333333 Блок 3</div>
</div>

@ArtemiyHodorev · 06.10.2016, 10:48

Народ, нужна помощь! Soldado дал отличный рабочий пример решения задачи. Но есть один нюанс. Этот скрипт затрагивает все вложенные div'ы. Т.е. не только те, которые должны меняться при перезагрузке, но и те, которые внутри них. Подскажите, как поправить так, чтобы скрипт менял только div'ы верхнего уровня, а вложенные в них игнорировал?

@sad67man · 06.10.2016, 16:41

ArtemiyHodorev, https://jsfiddle.net/6nfx36v2/1/

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div class="groupblock">
   <div class="block">11111111 БЛОК 1</div>
   <div class="block">22222222 Блок 2</div>
   <div class="block">33333333 Блок 3</div>
</div>
<div class="groupblock">
   <div class="block">11111111 БЛОК 1</div>
   <div class="block">22222222 Блок 2</div>
   <div class="block">33333333 Блок 3</div>
</div>
<div class="groupblock">
   <div class="block">11111111 БЛОК 1</div>
   <div class="block">22222222 Блок 2</div>
   <div class="block">33333333 Блок 3</div>
</div>

JavaScript
1
2
3
4
5
$(".groupblock").each(function(){
  var $elements = $(this).find('>.block');
  var number = Math.floor(Math.random()*$elements.length);
  $elements.eq(number).show();
});

CSS
1
.block{display:none;}

Новые блоги и статьи Все статьи Все блоги /
Модульный подход на примере F# DevAlt 06.03.2026 В блоге дяди Боба наткнулся на такое определение: В этой книге («Подход, основанный на вариантах использования») Ивар утверждает, что архитектура программного обеспечения — это структуры,. . .	Управление камерой с помощью скрипта OrbitControls.js на Three.js: Вращение, зум и панорамирование 8Observer8 05.03.2026 Содержание блога Финальная демка в браузере работает на Desktop и мобильных браузерах. Итоговый код: orbit-controls-threejs-js. zip. Сканируйте QR-код на мобильном. Вращайте камеру одним пальцем,. . .	SDL3 для Web (WebAssembly): Синхронизация спрайтов SDL3 и тел Box2D 8Observer8 04.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-sync-physics-sprites-sdl3-c. zip На первой гифке отладочные линии отключены, а на второй включены:. . .	SDL3 для Web (WebAssembly): Идентификация объектов на Box2D v3 - использование userData и событий коллизий 8Observer8 02.03.2026 Содержание блога Финальная демка в браузере. Итоговый код: finish-collision-events-sdl3-c. zip Сканируйте QR-код на мобильном и вы увидите, что появится джойстик для управления главным героем. . . .
Реалии Hrethgir 01.03.2026 Нет, я не закончил до сих пор симулятор. Эта задача сложнее. Не получилось уйти в плавсостав, но оно и к лучшему, возможно. Точнее получалось - но сварщиком в палубную команду, а это значит, в моём. . .	Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка библиотек: SDL3, Box2D, FreeType, SDL3_ttf, SDL3_mixer и SDL3_image из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .

@Мигрень 21 / 21 / 2 Регистрация: 09.11.2010 Сообщений: 102

	Рандобный показ блока при обновлении страницы 13.07.2012, 10:52. Показов 6907. Ответов 4 Метки нет (Все метки) Доброго времени суток Подскажите как реализовать следующее: Есть три div блока, как бы его сделать, чтобы при обновлении страницы рандомный блок был видим (допустим display:block), а остальные были display:none? Единственное дополнение - таких блоков "по три штуки" на странице несколько, поэтому надо чтобы они все при обновлении страницы как-то рандомно показывались Буду очень благодарен за помощь 0

@ArtemiyHodorev 0 / 0 / 0 Регистрация: 13.02.2013 Сообщений: 9
	06.10.2016, 10:48
	Народ, нужна помощь! Soldado дал отличный рабочий пример решения задачи. Но есть один нюанс. Этот скрипт затрагивает все вложенные div'ы. Т.е. не только те, которые должны меняться при перезагрузке, но и те, которые внутри них. Подскажите, как поправить так, чтобы скрипт менял только div'ы верхнего уровня, а вложенные в них игнорировал? 0