Изменение цвета 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]...
и таким образом идёт случайная перемена местами пар элементов массива вплоть до последней его пары

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

Новые блоги и статьи Все статьи Все блоги /
Подключение Box2D v3 к SDL3 для Android: физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .	Загрузка PNG с альфа-каналом на SDL3 для Android: с помощью SDL3_image 8Observer8 27.01.2026 Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию anaschu 26.01.2026 Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .	Воспроизведение звукового файла с помощью SDL3_mixer при касании экрана Android 8Observer8 26.01.2026 Содержание блога SDL3_mixer - это библиотека я для воспроизведения аудио. В отличие от инструкции по добавлению текста код по проигрыванию звука уже содержится в шаблоне примера. Нужно только. . .	Установка Android SDK, NDK, JDK, CMake и т.д. 8Observer8 25.01.2026 Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .	Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf 8Observer8 25.01.2026 Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .

@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