Question

总的来说，当有人将鼠标放在它们上面时，我试图让盒子改变颜色。颜色必须是随机的。我知道我错过了我的功能之间的连接点，但我无法弄清楚它是什么。

<!DOCTYPE html>
<html onmousedown='event.preventDefault();'
      onmouseenter = "colorize();"
>
<head>
<title> Boxes </title>
<meta charset='utf-8'>
<style>

  table {
    border-spacing: 6px;
    border: 1px rgb(#CCC);
    margin-top: .5in;
    margin-left: 1in;
}
   td {
    width: 40px; height: 40px; 
    border: 1px solid black;
    cursor: pointer;
}

</style>
<script>

创建一个名为colorize的函数，该函数将元素对象作为其传递参数并使用设置元素背景颜色样式属性 rgb（r，g，b）方法将每个r，g和b设置为0到0之间的随机数 255。

  function colorize() {

   var
    r = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
    g = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
    b = ('0'+(Math.random()*255|0).toString(16)).slice(-2);
   return '#' +r+g+b;
  }

  function colorize(co) {
   document.body.style.background = co;
  }

  </script>
  </head>
  <body>
  <table>
  <tbody>
  <script type="text/javascript">

使用document.write（）和for-loops填写表格以创建一个16x16的盒子表。对于每个td元素，创建onmouseenter调用以进行着色，并将元素本身传递给它（this）。

  var row = 16;
  var cols = 16;

  for(var r=0;r<row;r++){
   document.write("</tr>");

  for(var c=0;c<cols;c++){
   document.write("<td></td>"); 
  }

   document.write("</tr>");
  }
  </script>
  </tbody>
  </table>
  </body>
  </html>

Answer 1

您需要让colorize函数更新表格中的每个单元格。用一个函数替换 colorize（）和 colorize（co）：

function colorize() {
     var r = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
        g = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
        b = ('0'+(Math.random()*255|0).toString(16)).slice(-2);

     for (var i = 0; i < document.getElementsByTagName("td").length; i++){
        document.getElementsByTagName("td")[i].style.backgroundColor = "#"+r+g+b;
    }
}

Answer 2

我不确定你想对身体背景做什么，在你的文字中没有说明。 ALOS你的着色器功能被覆盖。也许你想要这样的东西......？

＆＃13;

<!DOCTYPE html>
<html>
<head>
<title> Boxes </title>
<meta charset='utf-8'>
<style>
table {
  border-spacing: 6px;
  border: 1px rgb(#CCC);
  margin-top: .5in;
  margin-left: 1in;
}
td {
  width: 40px; height: 40px; 
  border: 1px solid black;
  cursor: pointer;
}
</style>
  
<script>
   function colorize(el) {
     var r = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
        g = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
        b = ('0'+(Math.random()*255|0).toString(16)).slice(-2);
       el.style.backgroundColor = '#' +r+g+b;
  }

  </script>
  </head>
  <body>
  <table>
  <tbody>
  <script type="text/javascript">
    var row = 16;
    var cols = 16;

  for(var r=0;r<row;r++){
    document.write("</tr>");

    for(var c=0;c<cols;c++){
      document.write("<td onMouseEnter='colorize(this);'></td>"); 
    }
    document.write("</tr>");
  }
  </script>
  </tbody>
  </table>
  </body>
  </html>

＆＃13;

Answer 3

我玩Ids并在调用func的html标签中添加onmousedown。

function colorize() {

   var
    r = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
    g = ('0'+(Math.random()*255|0).toString(16)).slice(-2),
    b = ('0'+(Math.random()*255|0).toString(16)).slice(-2);
   return '#' +r+g+b;
  }


function change(){ 
   var x = document.getElementById("1");
    var y = document.getElementById("2");
    x.style.color = colorize();
    y.style.color = colorize();

	}

 <table frame="box" onmousedown="change()"id="1" >
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
</table> 

 <table frame="box" onmousedown="change()" id="2" >
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>February</td>
    <td>$200</td>
  </tr>
</table>

随机颜色

3 个答案: