Отображение цветов на компьютере
Материал из Department of Theoretical and Applied Mechanics
Версия от 21:29, 21 июля 2014; Денис (обсуждение | вклад)
Виртуальная лаборатория > Отображение цветов на компьютере
Спектральная палитра
Жирным шрифтом выделены 7 основных спектральных цветов <addscript src=Colors_on_computer/>
Не удается найти HTML-файл Colors_on_computer_TM.html
Скачать программу: Colors_on_computer.zip Текст программы на языке JavaScript (разработчики Кривцов Антон, Цветков Денис): <toggledisplay status=hide showtext="Показать↓" hidetext="Скрыть↑" linkstyle="font-size:default"> Файл "Colors_on_computer.js"
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><span style="font: ' + colors[i].font + ' 10pt sans-serif;">' + colors[i].name + '</span></td></tr>';
color_table.innerHTML += tr;
}
refresh_table();
}
Файл "Colors_on_computer.html"
<!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>
</toggledisplay>
