Отображение цветов на компьютере — различия между версиями
Материал из Department of Theoretical and Applied Mechanics
Wikiadmin (обсуждение | вклад) м (Замена текста — «<source lang="(.*)" first-line="(.*)">» на «<syntaxhighlight lang="$1" line start="$2" enclose="div">») |
Wikiadmin (обсуждение | вклад) м (Замена текста — «</source>» на «</syntaxhighligh>») |
||
| Строка 68: | Строка 68: | ||
refresh_table(); | refresh_table(); | ||
} | } | ||
| − | </ | + | </syntaxhighligh> |
Файл '''"Colors_on_computer.html"''' | Файл '''"Colors_on_computer.html"''' | ||
<syntaxhighlight lang="html" line start="1" enclose="div"> | <syntaxhighlight lang="html" line start="1" enclose="div"> | ||
| Строка 93: | Строка 93: | ||
</body> | </body> | ||
</html> | </html> | ||
| − | </ | + | </syntaxhighligh> |
</toggledisplay> | </toggledisplay> | ||
== См. также == | == См. также == | ||
Версия 18:56, 8 марта 2015
Виртуальная лаборатория > Отображение цветов на компьютереСпектральная палитра
Жирным шрифтом выделены 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();
} </syntaxhighligh> Файл "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> </syntaxhighligh> </toggledisplay>
