3つのテキストボックスにそれぞれ
色彩をあらわすrgbの数値を入力し、
ボタンを押せば、
アウトプット用のテキストボックスに
#の文字で始まり、かつ、
16進数形式である
rgbの値を表す文字列を表示するような
javascriptのコードを備えたhtmlを
作成していただけないでしょうか？
こちらが、ご要望のHTMLとJavaScriptのコードです。
3つの入力欄にRGBの値を入力し、ボタンを押すと、16進数形式の色コードが表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>RGB to Hex Converter</title>
<script>
function convertToHex() {
// RGB値を取得
let r = parseInt(document.getElementById("red").value);
let g = parseInt(document.getElementById("green").value);
let b = parseInt(document.getElementById("blue").value);
// 0～255の範囲に制限
if (isNaN(r) || r < 0 || r > 255) r = 0;
if (isNaN(g) || g < 0 || g > 255) g = 0;
if (isNaN(b) || b < 0 || b > 255) b = 0;
// 16進数に変換し、2桁で表示
let hexColor = `#${r.toString(16).padStart(2, '0')}${g.toString(16).padStart(2, '0')}${b.toString(16).padStart(2, '0')}`;
// 結果を表示
document.getElementById("output").value = hexColor;
}
</script>
</head>
<body>
<h2>RGB to Hex Converter</h2>
<label>R: <input type="number" id="red" min="0" max="255"></label>
<label>G: <input type="number" id="green" min="0" max="255"></label>
<label>B: <input type="number" id="blue" min="0" max="255"></label>
<button onclick="convertToHex()">変換</button>
<br>
<label>Hex: <input type="text" id="output" readonly></label>
</body>
</html>
このHTMLファイルを開いて、
RGB値を入力し、「変換」ボタンを押せば、
16進数の色コードが表示されます。
範囲外の値（0未満や255より大きい値）が入力された場合、
自動的に修正されます。
コメント
コメントを投稿