我目前正在处理以下问题:我想为用户输入提供三个字段集,他们的输入将被传输到一个有四行的表中:一个字段集“红色”输入的十六进制值,一个带有字段集“绿色”输入的十六进制值,一个带有字段集“蓝色”输入的十六进制值,最后一个带有一个小框,表示给定的十进制值作为它们的颜色。
这是我走了多远:
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="en">
<head>
<title>Colortheme</title>
<link rel="stylesheet" type="text/css" href="./../css/style.css">
</head>
<body>
<div id="seite">
<h1 id="header">Portray Colors</h1>
<div id="content">
<br>
<!-- Create form for user input. -->
<form name="color">
Red: <input type="text" name="c"> <br>
Green: <input type="text" name="c"> <br>
Blue: <input type="text" name="c"> <br>
<input type="button" value="Paint" onclick="javascript:drawmycolor();">
</form>
<script language="javascript" type="text/javascript">
a = Number(document.color.c.value);
// Converts decimal into hexadecimal values.
function getHexadecimalValue()
{
return parseInt(a, 10).toString(16);
}
// Creates table with hexadecimal values and color
function drawmycolor()
{
if (a >= 0 && a < 255 && Math.floor(a) == a)
{
var thecolor = getHexadecimalValue(a);
document.write('<table border="1" cellspacing="1" cellpadding="1">');
document.write('<tr><th>Hexadecimal Red</th><th>' +
'Hexadecimal Green</th><th>' +
'Hexadecimal Blue</th><th>' +
'Color</th></tr>');
document.write('<tr><td>' + getHexadecimalValue(a) + '</td><td>' +
getHexadecimalValue(a) + '</td><td>' +
getHexadecimalValue(a) +
'</td><td style="background-color:"thecolor"</td></tr>');
document.write('</table>');
}
else
{
window.alert("This value does not refer to any RGB color.")
}
}
</script>
<noscript>
<p>Da Sie die JavaScript Funktion Ihres Browsers deaktiviert haben, können
Teile diese Seite leider nicht angezeigt werden</p>
</noscript>
</center>
</div>
<div id="navigation">
<p> Zurueck zum <a href="./Startseite.html">Start</a>.</p>
</div>
<p id="footer">
<a href="http://validator.w3.org/check?uri=referer"><img
src="http://www.w3.org/Icons/valid-html401" alt="Valid HTML 4.01 Strict"
height="31" width="88"></a>
</p>
</div>
</body>
</html>
我遇到的第一个问题是,如果我输入一个像 6 这样的值,显然它应该适用于 if 条件,但我仍然会收到一条警告,告诉我这些值是错误的。
第二个问题是我希望在表格的最后一行有一个小颜色框的问题。我怎样才能在那里输入一个,我怎样才能确保盒子的颜色是用户输入的小数点之一?
谢谢你的帮助!
最佳答案
问题是当这一行被执行时:
a = Number(document.color.c.value);
a
始终是 undefined
,因为该行在事件处理程序之外运行。它应该是 drawMyColor
的一部分:
function drawmycolor()
{
a = Number(document.color.c.value);
....
关于javascript - JS/HTML : Convert decimal user input to color and fill box with it,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23481788/