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