Question

我目前正在解决以下问题：我希望有三个用于用户输入的字段集，并且它们的输入将被转换为具有四行的表：一个具有字段集输入的十六进制值＆＃34; red＆＃34;，一个具有fieldset输入的十六进制值＆＃34; green＆＃34;，一个具有fieldset输入的十六进制值＆＃34; blue＆＃34;最后一个带有一个小盒子，将给定的十进制值作为它们的颜色。

这是我走了多远：

<?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条件，我仍会收到警告，告诉我值是错误的。

第二个问题是我希望在我桌子的最后一行有一个小颜色框的那个。如何在那里输入一个，如何确保框中的颜色是用户输入的十进制数？

谢谢你的帮助！

Answer 1

问题在于执行此行时：

 a = Number(document.color.c.value);

a始终为undefined，因为此行是在事件处理程序之外运行的。它应该是drawMyColor：

的一部分

function drawmycolor()
  {
  a = Number(document.color.c.value);
  ....

JS / HTML：将十进制用户输入转换为颜色并用它填充框

1 个答案: