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

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

Новые блоги и статьи Все статьи Все блоги /
Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ	Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .
Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .

@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