ランダムカラーの場合<tr>

全体的に、誰かがマウスを置いたときにボックスを色に変更しようとしています。色はランダムでなければなりません。私は自分の機能の間に接続点がないことを知っていますが、それが何であるか把握できません。ランダムカラーの場合<tr>

<!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>

そのパラメータとして要素オブジェクトが渡され、それぞれのR、G、Bに設定 RGB（R、G、B）の方法を用いて要素の背景色のスタイルプロパティを設定された色付けと呼ばれる関数を作成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（）とのためのループ16×16ボックスのテーブルを作成するテーブルを埋めるの間の乱数。各td要素に対して、colorizeする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>

出典

2017-04-10 HTMLnoobcs17001

あなたのコードが読みやすいので、あなたの書式設定を修正してください。 – Carcigenicate

あなたを助けることを願っています！ – HTMLnoobcs17001

テキストフォントの色が背景色と同じ場合はどうなりますか？ – TeaCode

、何もあなたの文章でそのことについて語っていません。あなたのカラーライザー機能は上書きされます。多分あなたはこのようなものを求めていたでしょうか？

<!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>

出典

2017-04-10 21:49:46

これはまさに私が探していたものです！ – HTMLnoobcs17001

あなたが望んだのはうれしいですが、これは最適なコードから遠いことに注意してください。ここではいくつかの最適化が行われていますが、これは趣味のプロジェクトでなければそのまま使用しません。 –

「エル」を置いた場所を色分けしてIDとIDを作るのが間違っているようです。 – HTMLnoobcs17001

テーブルの各セルを更新する必要があります。一つの機能で色付け（）と色付け（コ）の両方を交換してください：私はあなたが身体の背景にやりたいことはよく分からない

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; 
    } 
}

出典

2017-04-10 21:49:37 alfredo

これはまた動作します！ありがとう！ – HTMLnoobcs17001

私は、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(); 
 

 
\t }

<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>

出典

2017-04-10 21:52:27

ランダムカラーの場合<tr>

答えて

関連する問題