Отображение цветов на компьютере — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
Денис (обсуждение | вклад) |
Денис (обсуждение | вклад) |
||
| (не показано 6 промежуточных версий 2 участников) | |||
| Строка 4: | Строка 4: | ||
''Жирным шрифтом выделены 7 основных спектральных цветов'' | ''Жирным шрифтом выделены 7 основных спектральных цветов'' | ||
| − | + | <htmlet nocache="yes">Tcvetkov/Color_models/Colors_on_computer_TM</htmlet> | |
Скачать программу: [[Медиа:Colors_on_computer.zip|Colors_on_computer.zip]] | Скачать программу: [[Медиа:Colors_on_computer.zip|Colors_on_computer.zip]] | ||
| − | Текст программы на языке JavaScript (разработчики [[Кривцов Антон]], [[Цветков Денис]]): < | + | <div class="mw-collapsible mw-collapsed" style="width:100%" > |
| + | '''Текст программы на языке JavaScript (разработчики [[Кривцов Антон]], [[Цветков Денис]]):''' <div class="mw-collapsible-content"> | ||
Файл '''"Colors_on_computer.js"''' | Файл '''"Colors_on_computer.js"''' | ||
| − | < | + | <syntaxhighlight lang="javascript" line start="1" enclose="div"> |
function Main_Colors_on_computer() { | function Main_Colors_on_computer() { | ||
var xx = "BB"; | var xx = "BB"; | ||
| Строка 68: | Строка 69: | ||
refresh_table(); | refresh_table(); | ||
} | } | ||
| − | </ | + | </syntaxhighlight> |
Файл '''"Colors_on_computer.html"''' | Файл '''"Colors_on_computer.html"''' | ||
| − | < | + | <syntaxhighlight lang="html5" line start="1" enclose="div"> |
<!DOCTYPE html> | <!DOCTYPE html> | ||
<html> | <html> | ||
| Строка 93: | Строка 94: | ||
</body> | </body> | ||
</html> | </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>
