Отображение цветов на компьютере

Материал из Department of Theoretical and Applied Mechanics
Версия от 18:53, 8 марта 2015; Wikiadmin (обсуждение | вклад) (Замена текста — «<source lang="(.*)" first-line="(.*)">» на «<syntaxhighlight lang="$1" line start="$2" enclose="div">»)

Перейти к: навигация, поиск
Виртуальная лаборатория > Отображение цветов на компьютере

Спектральная палитра

Жирным шрифтом выделены 7 основных спектральных цветов

Цвет Код Название

Скачать программу: Colors_on_computer.zip Текст программы на языке JavaScript (разработчики Кривцов Антон, Цветков Денис): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "Colors_on_computer.js" <syntaxhighlight lang="javascript" line start="1" enclose="div"> function Main_Colors_on_computer() { 

   var xx = "BB";
   xx_text.value = xx;
   xx_range.value = parseInt(xx, 16);

   var colors = [];
   colors.push({color_xx:"#FF0000", name:"красный",           font:"bold"});
   colors.push({color_xx:"#FFxx00", name:"оранжевый",         font:"bold"});
   colors.push({color_xx:"#FFFF00", name:"желтый",            font:"bold"});
   colors.push({color_xx:"#xxFF00", name:"желто-зеленый",     font:""});
   colors.push({color_xx:"#00FF00", name:"зеленый",           font:"bold"});
   colors.push({color_xx:"#00FFxx", name:"зелено-голубой",    font:""});
   colors.push({color_xx:"#00FFFF", name:"голубой",           font:"bold"});
   colors.push({color_xx:"#00xxFF", name:"голобой-синий",     font:""});
   colors.push({color_xx:"#0000FF", name:"синий",             font:"bold"});
   colors.push({color_xx:"#xx00FF", name:"фиолетовый",        font:"bold"});
   colors.push({color_xx:"#FF00FF", name:"сиреневый",         font:""});
   colors.push({color_xx:"#FF00xx", name:"пурпурный",         font:""});

   function get_color(color_xx) {                          // ф-ия заменяет символы "xx" на содержимое переменной xx
       if (color_xx.indexOf("xx") == -1) return color_xx;
       else return color_xx.replace("xx", xx);
   }
   function refresh_table() {                              // обновление таблицы цветов
       for (var i = 0; i < colors.length; i++) {
           var color = get_color(colors[i].color_xx);
           document.getElementById('color' + i).style.backgroundColor = color;
           document.getElementById('name' + i).innerHTML = color.substring(1);
       }
   }
   this.set_xx = function(color) {                         // 0 <= color <= 255
       xx = color.toString(16).toUpperCase();
       if (xx.length == 1) xx = "0" + xx;
       refresh_table();
   };
   xx_range.oninput = function() {
       app.set_xx(parseInt(this.value));
       var text = (parseInt(this.value)).toString(16).toUpperCase();
       if (text.length == 1) text = '0' + text;
       xx_text.value = text;
   };
   xx_text.oninput = function() {
       if (!this.checkValidity()) return;
       app.set_xx(parseInt(this.value, 16));
       xx_range.value = parseInt(this.value, 16);
   };

   // генерация таблицы
   for (var i = 0; i < colors.length; i++) {
       var tr = "";
       tr += '<tr><td id="color' + i + '" style=" width:60px; height:21px;"></td>' +
           '<td id="name' + i + '"></td>' +
           '<td>' + colors[i].name + '</td></tr>';
       color_table.innerHTML += tr;
   }

   refresh_table();

} </source> Файл "Colors_on_computer.html" <syntaxhighlight lang="html" line start="1" enclose="div"> <!DOCTYPE html> <html> <head> 

   <meta charset="UTF-8" />
   <title>Отображение цветов на компьютере</title>
   <script src="Colors_on_computer.js"></script>

</head> <body>

Цвет Код Название 

   <input type="range" id="xx_range" min=0 max=255>
   <input id="xx_text" style="width: 2em;" required pattern="^([A-Fa-f0-9]{2})$">

   <script type="text/javascript">var app = new Main_Colors_on_computer();</script>

</body> </html> </source> </toggledisplay>

См. также

Источник — «http://tm.spbstu.ru/?title=Отображение_цветов_на_компьютере&oldid=32309»