Отображение цветов на компьютере — различия между версиями

Материал из Department of Theoretical and Applied Mechanics
Перейти к: навигация, поиск
 
(не показано 8 промежуточных версий 2 участников)
Строка 1: Строка 1:
 
[[Виртуальная лаборатория]] > [[Отображение цветов на компьютере]] <HR>
 
[[Виртуальная лаборатория]] > [[Отображение цветов на компьютере]] <HR>
−
 
  
 
== Спектральная палитра ==
 
== Спектральная палитра ==
  
 
''Жирным шрифтом выделены 7 основных спектральных цветов''
 
''Жирным шрифтом выделены 7 основных спектральных цветов''
 +
<htmlet nocache="yes">Tcvetkov/Color_models/Colors_on_computer_TM</htmlet>
 +
 +
Скачать программу: [[Медиа:Colors_on_computer.zip|Colors_on_computer.zip]]
 +
<div class="mw-collapsible mw-collapsed" style="width:100%" >
 +
'''Текст программы на языке JavaScript (разработчики [[Кривцов Антон]], [[Цветков Денис]]):''' <div class="mw-collapsible-content">
 +
Файл '''"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:""});
  
−
{| border=1 style="text-align:center"
+
    function get_color(color_xx) {                         // ф-ия заменяет символы "xx" на содержимое переменной xx
−
!bgcolor=#DDDDDD width="30%"|Цвет
+
        if (color_xx.indexOf("xx") == -1) return color_xx;
−
!bgcolor=#DDDDDD|Код
+
        else return color_xx.replace("xx", xx);
−
!bgcolor=#DDDDDD|Название
+
    }
−
|-
+
    function refresh_table() {                              // обновление таблицы цветов
−
|bgcolor=#FF0000|
+
        for (var i = 0; i < colors.length; i++) {
−
|FF0000
+
            var color = get_color(colors[i].color_xx);
−
|'''красный'''
+
            document.getElementById('color' + i).style.backgroundColor = color;
−
|-
+
            document.getElementById('name' + i).innerHTML = color.substring(1);
−
|bgcolor=#FFBB00|
+
        }
−
|FFBB00
+
    }
−
|'''оранжевый'''
+
    this.set_xx = function(color) {                        // 0 <= color <= 255
−
|-
+
        xx = color.toString(16).toUpperCase();
−
|bgcolor=#FFFF00|
+
        if (xx.length == 1) xx = "0" + xx;
−
|FFFF00
+
        refresh_table();
−
|'''желтый'''
+
    };
−
|-
+
    xx_range.oninput = function() {
−
|bgcolor=#BBFF00|
+
        app.set_xx(parseInt(this.value));
−
|BBFF00
+
        var text = (parseInt(this.value)).toString(16).toUpperCase();
−
|желто-зеленый
+
        if (text.length == 1) text = '0' + text;
−
|-
+
        xx_text.value = text;
−
|bgcolor=#00FF00|
+
    };
−
|00FF00
+
    xx_text.oninput = function() {
−
|'''зеленый'''
+
        if (!this.checkValidity()) return;
−
|-
+
        app.set_xx(parseInt(this.value, 16));
−
|bgcolor=#00FFBB|
+
        xx_range.value = parseInt(this.value, 16);
−
|00FFBB
+
    };
−
|зелено-голубой
 
−
|-
 
−
|bgcolor=#00FFFF|
 
−
|00FFFF
 
−
|'''голубой'''
 
−
|-
 
−
|bgcolor=#00BBFF|
 
−
|00BBFF
 
−
|голубой-синий
 
−
|-
 
−
|bgcolor=#0000FF|
 
−
|0000FF
 
−
|'''синий'''
 
−
|-
 
−
|bgcolor=#BB00FF|
 
−
|BB00FF
 
−
|'''фиолетовый'''
 
−
|-
 
−
|bgcolor=#FF00FF|
 
−
|FF00FF
 
−
|align=center|сиреневый
 
−
|-
 
−
|bgcolor=#FF00BB|
 
−
|FF00BB
 
−
|align=center|пурпурный
 
−
|-
 
−
|}
 
  
 +
    // генерация таблицы
 +
    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><span style="font: ' + colors[i].font + ' 10pt sans-serif;">' + colors[i].name + '</span></td></tr>';
 +
        color_table.innerHTML += tr;
 +
    }
  
−
{{#ifgroup:sysop|
+
    refresh_table();
−
'''Архив''' <toggledisplay status=hide showtext="показать↓" hidetext="скрыть↑" linkstyle="font-size:default">
+
}
−
{| border=1
+
</syntaxhighlight>
−
!bgcolor=#DDDDDD|-Цвет-!!bgcolor=#DDDDDD|Название!!bgcolor=#DDDDDD|Код
+
Файл '''"Colors_on_computer.html"'''
−
|-
+
<syntaxhighlight lang="html5" line start="1" enclose="div">
−
|bgcolor=#FF0000|
+
<!DOCTYPE html>
−
|align=center|'''красный'''
+
<html>
−
|<span style="color:#ff0000">FF</span><span style="color:#00ff00">00</span><span style="color:#0000ff">00</span>
+
<head>
−
|-
+
    <meta charset="UTF-8" />
−
|bgcolor=#FFBB00|
+
    <title>Отображение цветов на компьютере</title>
−
|align=center|'''оранжевый'''
+
    <script src="Colors_on_computer.js"></script>
−
|<span style="color:#ff0000">FF</span><span style="color:#00ff00">BB</span><span style="color:#0000ff">00</span>
+
</head>
−
|-
+
<body>
−
|bgcolor=#FFFF00|
+
    <table id="color_table" border=1 style="text-align: center">
−
|align=center|'''желтый'''
+
        <tr style="text-align: center; background-color: #DDDDDD">
−
|<span style="color:#ff0000">FF</span><span style="color:#00ff00">FF</span><span style="color:#0000ff">00</span>
+
            <td>Цвет</td>
−
|-
+
            <td style="width:60px;">Код</td>
−
|bgcolor=#BBFF00|
+
            <td>Название</td>
−
|align=center|желто-зеленый
+
        </tr>
−
|<span style="color:#ff0000">BB</span><span style="color:#00ff00">FF</span><span style="color:#0000ff">00</span>
+
    </table><br>
−
|-
 
−
|bgcolor=#00FF00|
 
−
|align=center|'''зеленый'''
 
−
|<span style="color:#ff0000">00</span><span style="color:#00ff00">FF</span><span style="color:#0000ff">00</span>
 
−
|-
 
−
|bgcolor=#00FFBB|
 
−
|align=center|зелено-голубой
 
−
|<span style="color:#ff0000">00</span><span style="color:#00ff00">FF</span><span style="color:#0000ff">BB</span>
 
−
|-
 
−
|bgcolor=#00FFFF|
 
−
|align=center|'''голубой'''
 
−
|<span style="color:#ff0000">00</span><span style="color:#00ff00">FF</span><span style="color:#0000ff">FF</span>
 
−
|-
 
−
|bgcolor=#00BBFF|
 
−
|align=center|голубой-синий
 
−
|<span style="color:#ff0000">00</span><span style="color:#00ff00">BB</span><span style="color:#0000ff">FF</span>
 
−
|-
 
−
|bgcolor=#0000FF|
 
−
|align=center|'''синий'''
 
−
|<span style="color:#ff0000">00</span><span style="color:#00ff00">00</span><span style="color:#0000ff">FF</span>
 
−
|-
 
−
|bgcolor=#BB00FF|
 
−
|align=center|'''фиолетовый'''
 
−
|<span style="color:#ff0000">BB</span><span style="color:#00ff00">00</span><span style="color:#0000ff">FF</span>
 
−
|-
 
−
|bgcolor=#FF00FF|
 
−
|align=center|сиреневый
 
−
|<span style="color:#ff0000">FF</span><span style="color:#00ff00">00</span><span style="color:#0000ff">FF</span>
 
−
|-
 
−
|}
 
  
−
</toggledisplay>
+
    <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>
 +
</syntaxhighlight>
 +
</div>
 +
</div>
 
== См. также ==
 
== См. также ==
−
[[Различные цветовые модели и их использование]]
+
*[[Различные цветовые модели и их использование]]
 +
*[[Отображение цветов на компьютере - wiki-таблица | Отображение цветов на компьютере (таблица без Javascript)]]
  
 
[[Category: Виртуальная лаборатория]]
 
[[Category: Виртуальная лаборатория]]

Текущая версия на 09:24, 11 марта 2015

Виртуальная лаборатория > Отображение цветов на компьютере

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

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

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

Скачать программу: Colors_on_computer.zip

Текст программы на языке JavaScript (разработчики Кривцов Антон, Цветков Денис):

Файл "Colors_on_computer.js" 

 1 function Main_Colors_on_computer() {
 2     var xx = "BB";
 3     xx_text.value = xx;
 4     xx_range.value = parseInt(xx, 16);
 5 
 6     var colors = [];
 7     colors.push({color_xx:"#FF0000", name:"красный",           font:"bold"});
 8     colors.push({color_xx:"#FFxx00", name:"оранжевый",         font:"bold"});
 9     colors.push({color_xx:"#FFFF00", name:"желтый",            font:"bold"});
10     colors.push({color_xx:"#xxFF00", name:"желто-зеленый",     font:""});
11     colors.push({color_xx:"#00FF00", name:"зеленый",           font:"bold"});
12     colors.push({color_xx:"#00FFxx", name:"зелено-голубой",    font:""});
13     colors.push({color_xx:"#00FFFF", name:"голубой",           font:"bold"});
14     colors.push({color_xx:"#00xxFF", name:"голобой-синий",     font:""});
15     colors.push({color_xx:"#0000FF", name:"синий",             font:"bold"});
16     colors.push({color_xx:"#xx00FF", name:"фиолетовый",        font:"bold"});
17     colors.push({color_xx:"#FF00FF", name:"сиреневый",         font:""});
18     colors.push({color_xx:"#FF00xx", name:"пурпурный",         font:""});
19 
20     function get_color(color_xx) {                          // ф-ия заменяет символы "xx" на содержимое переменной xx
21         if (color_xx.indexOf("xx") == -1) return color_xx;
22         else return color_xx.replace("xx", xx);
23     }
24     function refresh_table() {                              // обновление таблицы цветов
25         for (var i = 0; i < colors.length; i++) {
26             var color = get_color(colors[i].color_xx);
27             document.getElementById('color' + i).style.backgroundColor = color;
28             document.getElementById('name' + i).innerHTML = color.substring(1);
29         }
30     }
31     this.set_xx = function(color) {                         // 0 <= color <= 255
32         xx = color.toString(16).toUpperCase();
33         if (xx.length == 1) xx = "0" + xx;
34         refresh_table();
35     };
36     xx_range.oninput = function() {
37         app.set_xx(parseInt(this.value));
38         var text = (parseInt(this.value)).toString(16).toUpperCase();
39         if (text.length == 1) text = '0' + text;
40         xx_text.value = text;
41     };
42     xx_text.oninput = function() {
43         if (!this.checkValidity()) return;
44         app.set_xx(parseInt(this.value, 16));
45         xx_range.value = parseInt(this.value, 16);
46     };
47 
48     // генерация таблицы
49     for (var i = 0; i < colors.length; i++) {
50         var tr = "";
51         tr += '<tr><td id="color' + i + '" style=" width:60px; height:21px;"></td>' +
52             '<td id="name' + i + '"></td>' +
53             '<td><span style="font: ' + colors[i].font + ' 10pt sans-serif;">' + colors[i].name + '</span></td></tr>';
54         color_table.innerHTML += tr;
55     }
56 
57     refresh_table();
58 }

Файл "Colors_on_computer.html" 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="UTF-8" />
 5     <title>Отображение цветов на компьютере</title>
 6     <script src="Colors_on_computer.js"></script>
 7 </head>
 8 <body>
 9     <table id="color_table" border=1 style="text-align: center">
10         <tr style="text-align: center; background-color: #DDDDDD">
11             <td>Цвет</td>
12             <td style="width:60px;">Код</td>
13             <td>Название</td>
14         </tr>
15     </table><br>
16 
17     <input type="range" id="xx_range" min=0 max=255>
18     <input id="xx_text" style="width: 2em;" required pattern="^([A-Fa-f0-9]{2})$">
19 
20     <script type="text/javascript">var app = new Main_Colors_on_computer();</script>
21 </body>
22 </html>

См. также[править]

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