隨機顏色爲<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>

創建傳遞的元對象作爲其參數，並設置使用 RGB（R，G，B）方法設定每個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">

使用文件撰寫（和for循環填寫表中創建一個16×16盒表。對於每個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>

來源

2017-04-10 HTMLnoobcs17001

請解決您的格式使你的代碼是清晰的。 – Carcigenicate

希望能幫到你！ – HTMLnoobcs17001

如果您的文字字體顏色與背景顏色相同，該怎麼辦？ – TeaCode

我不知道你想與身體的背景做什麼，什麼都不說，大約在你的文字。 ALos你的colorizer函數被覆蓋。也許你想要這樣的東西......？

<!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爲彩色的地方你把「EL」。 – HTMLnoobcs17001

您需要使用colorize函數更新表格中的每個單元格。一個功能更換兩個彩色化（）和彩色化（共）：

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播放和添加onmousedown事件中調用FUNC html標記。

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>

回答

相關問題