Изменение цвета li при нажатии мышкой в любую точку экрана

@Савва · Регистрация: 12.04.2012

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

Как прописать javascript, чтобы когда можно было мышкой щелкнуть на любой точке монитора - пункты li при каждом нажатии мышки меняли цвета в рандомном порядке?

HTML5
1
2
3
4
5
6
7
8
9
10
11
<body onclick="...">
<td id="nom1">
<div id="menu">
<ul>
<li>Пункт 1</li>
<li>Пункт 2</li>
<li>Пункт 3</li>
<li>Пункт 4</li>
<ul>
</div>
</td>

@kalabuni · 11.09.2014, 19:49

необходимо более чётко сформулированное требование к цветам
например: #aaaaa4, #aaaaa1, #aaaaa3 и #aaaaa2 - это ведь тоже разные цвета и тоже в рандомном порядке - а на взгляд их не отличишь друг от друга

@Савва · 11.09.2014, 20:31 **[ТС]**

kalabuni,

Нужен небольшой Array массив и туда загнать обычные цвета типа red, green, blue и т.д. Потом при нажатии мышкой в любую точку экрана менять
цвет текста в li тегах в рандомном порядке (цвета брать из массива).

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body onclick="highlight()">
 
<ul list style type = "none">
  <li id = "l0">this is line one</li>
  <li id = "l1">this is line two</li>
  <li id = "l2">this is line three</li>
</ul>
 
<script>
function highlight(name,color) {
  var a = document.getElementById(name);
  a.style.color = color;
}
 
highlight("l0", "red");
highlight("l2", "blue");
 
</script>
 
</body>

@kalabuni · 11.09.2014, 20:40

Сообщение от Савва

Нужен небольшой Array массив и туда загнать обычные цвета типа red, green, blue и т.д.

а ещё почётче - никак?
сколько именно и какие именно цвета будут в массиве?.. и не "типа", а "точно"

@Eva Rosalene · 11.09.2014, 20:45

JavaScript
1
2
3
4
5
6
7
8
9
var colorList = ['#FF00FF', '#FACE8D', '#A0F1C3'];
var cChange = (function (){
   var lis = document.querySelectorAll('li');
   for (var i = 0; i < lis.length; ++i){
      lis[i].style.color = this[Math.floor(Math.random() * this.length * 2) % this.length];
   }
}).bind(colorList);
 
document.onclick = cChange;

@Савва · 11.09.2014, 20:52 **[ТС]**

kalabuni, red, blue, green, black, yellow, white, orange. Вот все цвета.

@kalabuni · 11.09.2014, 21:16

HTML5
1
2
3
<body onclick="var arr = ['red', 'blue', 'green', 'black', 'yellow', 'white', 'orange']; arr.sort (new Function ('x, y', 'return Math.random () > .5'));
               for (var lis = document.getElementById ('menu').getElementsByTagName ('LI'), j = 0, J = lis.length; j < J; j++)
               lis [j].style.color = arr [j]">

только учтите, что в большинстве браузеров высота тела документа определяется высотой содержимого
т.е. если контента на странице будет по высоте мало, то "по любой точке экрана" не получится

@Савва · 11.09.2014, 23:33 **[ТС]**

kalabuni, 2 и 3 строчка понятны. А вот первая не очень.

JavaScript
1
arr.sort (new Function ('x, y', 'return Math.random () > .5'));

Что тут происходит? Массив сортируется как? x, y это что? и что такое .5
Объясни плиз! А за пример спасибо)

Добавлено через 1 час 33 минуты
УЖЕ РАЗОБРАЛСЯ!!! СПАСИБО БОЛЬШОЕ!!!!

@kalabuni · 11.09.2014, 23:51

Math.random возвращает положительное число в интервале от 0 до "меньше или равно 1"
т.е. случайным образом возвращается либо true (если Math.random выдал число, большее, чем 0.5), либо false (если Math.random выдал число, меньше или равное, чем 0.5)

x и y - два последовательно идущих элемента массива arr
т.е. на первом шаге x - это arr [0], а y - это arr [1],
если конструкция Math.random () > .5 вернёт на первом шаге true, то текущий порядок элементов сохранится, если же false, то элементы поменяются местами
на втором шаге x - текуший arr [1] (возможно, бывший ранее на месте arr [0]), а y - это arr [2]...
и таким образом идёт случайная перемена местами пар элементов массива вплоть до последней его пары

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

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	SDL3 для Web (WebAssembly): Сборка SDL3 и Box2D из исходников с помощью 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 позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	11.09.2014, 19:49
	необходимо более чётко сформулированное требование к цветам например: #aaaaa4, #aaaaa1, #aaaaa3 и #aaaaa2 - это ведь тоже разные цвета и тоже в рандомном порядке - а на взгляд их не отличишь друг от друга 0

@Савва 10 / 10 / 0 Регистрация: 12.04.2012 Сообщений: 333
	11.09.2014, 20:52 [ТС]
	kalabuni, red, blue, green, black, yellow, white, orange. Вот все цвета. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	11.09.2014, 23:51
	Math.random возвращает положительное число в интервале от 0 до "меньше или равно 1" т.е. случайным образом возвращается либо true (если Math.random выдал число, большее, чем 0.5), либо false (если Math.random выдал число, меньше или равное, чем 0.5) x и y - два последовательно идущих элемента массива arr т.е. на первом шаге x - это arr [0], а y - это arr [1], если конструкция Math.random () > .5 вернёт на первом шаге true, то текущий порядок элементов сохранится, если же false, то элементы поменяются местами на втором шаге x - текуший arr [1] (возможно, бывший ранее на месте arr [0]), а y - это arr [2]... и таким образом идёт случайная перемена местами пар элементов массива вплоть до последней его пары равномерность распределения при данной случайной сортировке, разумеется, не "нормальная гауссовская" -- вероятность того, что изначально нулевой элемент окажется на выходе последним меньше, чем у любого другого элемента... но для данной задачи такое "не очень равномерное" распределение вполне подойдёт 1

Опции темы