Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.56/25: Рейтинг темы: голосов - 25, средняя оценка - 4.56
1 / 1 / 0
Регистрация: 29.10.2015
Сообщений: 116

Смена цвета текста в таблице в зависимости от фона

21.09.2016, 18:03. Показов 4866. Ответов 8
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Имеется следующая веб-страница:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<html>
<body>
<table>
<script language="JavaScript">
   
    document.write("<tr><td>&nbsp;</td>");
    for (i = 1; i < 10; i++) document.write("<td><td>"+"&nbsp;</td>");
    document.write("</tr>"); 
    var r, g, b, color;
    for (i = 1; i < 10; i++)
    {
        document.write("<tr><td>"  + "&nbsp;</td>");
        for (j = 1; j < 10; j++){
 
            r = Math.round(255*Math.random()).toString(16);
            g = Math.round(255*Math.random()).toString(16);
            b = Math.round(255*Math.random()).toString(16);
            color = r + g + b;
 
            document.write('<td bgcolor=#'+color+'>'+'#'+color+'</td>');          
        }
            document.write("</tr>");
    }
</script>
</table>
</body>
</html>
Суть - создается рандомная таблица с рандомными цветами. Вот только текст (название цветов) только черного цвета. Каким образом создать контраст между цветом текста и фоном? (к примеру белый текст на черном или темно-синем фоне). То есть нужна автоматическая смена цвета текста в зависимости от фона.
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
21.09.2016, 18:03
Ответы с готовыми решениями:

Смена цвета текста и фона при наведении на кнопки
Создайте HTML страницу ,в которой задать две кнопки &quot;Основная&quot; и &quot;Дополнительная&quot; при наведении мыши на которые менялся бы цвет текста...

Изменение цвета фона текста в зависимости от значения
Здравствуйте уважаемые форумчане. Только начал изучать xml понадобилось сделать следующее: в зависимости от цены продукта изменить цвет...

Смена цвета текста, в зависимости от значения
Приветствую. Вот какое дело. Вступление У меня есть страничка вывода заказов. Там в таблице есть столбец &quot;Статус&quot;....

8
0 / 0 / 0
Регистрация: 05.11.2015
Сообщений: 17
08.11.2016, 13:11
Интересно, хотелось бы тоже узнать...
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
08.11.2016, 13:29
Ну... доработайте этот скрипт с учетом ваших пожеланий. Назначайте цвет текста в зависимости от значения color.
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
08.11.2016, 14:22
Цитата Сообщение от Balanaar Посмотреть сообщение
доработайте этот скрипт с учетом ваших пожеланий. Назначайте цвет текста в зависимости от значения color
очень хороший совет
только вот.. алгоритмом не поделитесь?
например, цвет фона #345678 -- по какой математической формуле можно получить для него контрастный белый цвет текста #ffffff?
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
08.11.2016, 14:26
kalabuni, а разве в вопросе сочетания цветов может быть какая-то строгая математическая формула? Кому-то цвет фона кажется слишком светлым для белого цвета текста, кому-то наоборот. Тут надо самому покрутить
0
супермизантроп
Эксперт JS
3941 / 2979 / 692
Регистрация: 18.04.2012
Сообщений: 8,629
08.11.2016, 14:40
Цитата Сообщение от Balanaar Посмотреть сообщение
разве в вопросе сочетания цветов может быть какая-то строгая математическая формула?
инверсия цветов (замена их на контрастные) реализована в большинстве графических редакторов
но вот каким именно образом это сделано -- для меня "тайна великая есть"
вы так небрежно посоветовали устанавливать значение цвета в зависимости от цвета фона, что я обрадовался -- наконец-то кто-то мне объяснит-расскажет
Цитата Сообщение от Balanaar Посмотреть сообщение
Тут надо самому покрутить
что крутить предлагаете? тестикулы?
0
Эксперт JS
2463 / 1769 / 625
Регистрация: 11.07.2016
Сообщений: 4,067
08.11.2016, 14:47
Например можно конус HSI покрутить:
https://habrahabr.ru/post/181580/
Перебором найти граничное значение I, при котором менять цвет с черного на белый и наоборот. Можно использовать не только черный и белые цвета. Я ж говорю - столько простора для экспериментов.

Добавлено через 2 минуты
I = 1/3 * (R+G+B)

Добавлено через 3 минуты
И ниже CIELAB модель тоже очень доходчиво расписана
0
the hardway first
Эксперт JS
 Аватар для j2FunOnly
2475 / 1847 / 910
Регистрация: 05.06.2015
Сообщений: 3,610
08.11.2016, 14:51
f1nger, можно вычислять яркость из rgb значений и делать цвет текста светлым или тёмным.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
  var randomColor = {
    shuffle: function () {
      this.r = Math.round(255 * Math.random());
      this.g = Math.round(255 * Math.random());
      this.b = Math.round(255 * Math.random());
      return this;
    },
    decToHex: function (value) {
      var result = value.toString(16);
      return value > 15 ? result : '0' + result;
    },
    toHex: function () {
      return [
        '#',
        this.decToHex(this.r),
        this.decToHex(this.g),
        this.decToHex(this.b)
      ].join('');
    },
    isDark: function () {
      return (this.r * 0.2126 + this.g * 0.7152 + this.b * 0.0722) <= 165;
    }
  };
 
  var table = document.createElement('table');
  var cellFactory = function () {
    var cell = document.createElement('td');
    cell.style.backgroundColor = randomColor.shuffle().toHex();
    cell.textContent = randomColor.toHex();
    cell.style.color = randomColor.isDark() ? 'white' : 'black';
    return cell;
  }
  for(var i = 0; i < 10; i++) {
    var row = document.createElement('tr');
    table.appendChild(row);
    for(var j = 0; j < 10; j++) row.appendChild(cellFactory());
  };
  document.body.appendChild(table);
2
08.11.2016, 18:26
 Комментарий модератора 
Просьба воздержаться от оскорблений и оффтопа. Тема почищена
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
08.11.2016, 18:26
Помогаю со студенческими работами здесь

Как сделать html-страничку с выбором названия цвета и в зависимости от выбранного цвета менять цвет фона?
Как сделать html-страничку с выбором названия цвета и в зависимости от выбранного цвета менять цвет фона? Подскажите, пожалуйста, я...

Смена цвета фона кнопкой
Всем привет! Как нажатием на кнопки изменить цвет области div, а не всего фона? &lt;html&gt; &lt;head&gt; ...

Непроизвольная смена цвета фона
Написал код, который создаёт окно и изменяет исходя из нажатых кнопок на клавиатуре и нажатий мышкой. Всё бы ничего, но при нажатии...

Смена цвета фона по кнопке
Здравствуйте. Хочу сделать кнопку,которая, например,будет менять цвет фона. Использую flask. P.S: В веб разработке пока что полный 0 ...

Плавная смена цвета фона на CSS3
Всем привет! Кто подскажет как сделать плавную смену градиентного цвета фона на сайте. Вот как у меня сделан фон: ...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
Новые блоги и статьи
Автозаполнение реквизита при выборе элемента справочника
Maks 27.03.2026
Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .
Сумматор с применением элементов трёх состояний.
Hrethgir 26.03.2026
Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа
Maks 26.03.2026
Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .
Команды формы и диалоговое окно
Maks 26.03.2026
1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .
Кому нужен AOT?
DevAlt 26.03.2026
Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .
Отправка уведомления на почту при изменении наименования справочника
Maks 24.03.2026
Программная отправка письма электронной почты на примере изменения наименования типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной. . .
модель ЗдравоСохранения 5. Меньше увольнений- больше дохода!
anaschu 24.03.2026
Теперь система здравосохранения уменьшает количество увольнений. 9TO2GP2bpX4 a42b81fb172ffc12ca589c7898261ccb/ https:/ / rutube. ru/ video/ a42b81fb172ffc12ca589c7898261ccb/ Слева синяя линия -. . .
Midnight Chicago Blues
kumehtar 24.03.2026
Такой Midnight Chicago Blues, знаешь?. . Когда вечерние улицы становятся ночными, а ты не можешь уснуть. Ты идёшь в любимый старый бар, и бармен наливает тебе виски. Ты смотришь на пролетающие. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru