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

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

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

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

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
Programming
Эксперт
94731 / 64177 / 26122
Регистрация: 12.04.2006
Сообщений: 116,782
21.09.2016, 18:03
Ответы с готовыми решениями:

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

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

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

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

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

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

Добавлено через 3 минуты
И ниже CIELAB модель тоже очень доходчиво расписана
0
the hardway first
Эксперт JS
2461 / 1836 / 906
Регистрация: 05.06.2015
Сообщений: 3,603
08.11.2016, 14:51 8
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
vavun
08.11.2016, 18:26     Смена цвета текста в таблице в зависимости от фона
  #9
 Комментарий модератора 
Просьба воздержаться от оскорблений и оффтопа. Тема почищена
0
IT_Exp
Эксперт
87844 / 49110 / 22898
Регистрация: 17.06.2006
Сообщений: 92,604
08.11.2016, 18:26

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

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

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

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


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

Или воспользуйтесь поиском по форуму:
9
Ответ Создать тему
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2024, CyberForum.ru