使用Java腳本創建表格以模擬光照動畫

-4

如何創建類似 exemple of the table的表格以模擬光照動畫。動畫是，點擊開始按鈕後，逐漸將的瓷磚顏色從左到右依次變化，然後從上到下使用十個顏色列表不同。將欣賞任何幫助。使用Java腳本創建表格以模擬光照動畫

我有代碼HTML和CSS，我需要JS。

function animation(){ 
 
    var colors = [ 
 
\t \t \t \t \t "rgb(0,0,0)", 
 
\t \t \t \t \t "rgb(255,0,0)", 
 
\t \t \t \t \t "rgb(0,255,0)", 
 
\t \t \t \t \t "rgb(0,0,255)", 
 
\t \t \t \t \t "rgb(100,0,100)", 
 
\t \t \t \t \t "rgb(125,125,0)", 
 
\t \t \t \t \t "rgb(0,150,150)", 
 
\t \t \t \t \t "rgb(175,175,175)", 
 
\t \t \t \t \t "rgb(200,0,100)", 
 
\t \t \t \t \t "rgb(1,0,100)", 
 
\t \t \t \t \t "rgb(225,225,225)" 
 
\t \t \t \t ]; 
 
    
 
    Array.from(document.querySelectorAll("table td div")).forEach(function(item, index){ 
 
    
 
    var color = colors[ index % 11 ]; 
 
    item.style.backgroundColor = color; 
 
    }); 
 
}

body { width: 450px; 
 
\t \t margin-left: auto; 
 
\t \t margin-right: auto; 
 
\t \t 
 
\t } 
 

 

 
table td { height: 45px; 
 
\t \t \t width: 45px; 
 
\t \t \t padding: 0em; 
 
\t \t \t background-color:#F7F27F; 
 
\t \t \t 
 
\t } 
 
/*table {border-collapse: collapse; 
 
}*/ 
 
\t 
 
table td div { height:100%; 
 
\t \t \t \t width: 100%; 
 
\t \t \t \t transition: all 0.3s ease-in-out ; 
 
\t \t \t \t } 
 

 

 

 
table tr:nth-child(odd) td:nth-child(odd) { background-color:#B0090C; } 
 
table tr:nth-child(even) td:nth-child(even) { background-color:#B0090C; } 
 

 
table tr:nth-child(1) td:nth-child(1) div { transition-delay: 0.1s} 
 
table tr:nth-child(1) td:nth-child(2) div { transition-delay: 0.2s } 
 
table tr:nth-child(1) td:nth-child(3) div { transition-delay: 0.3s } 
 
table tr:nth-child(1) td:nth-child(4) div { transition-delay: 0.4s } 
 
table tr:nth-child(1) td:nth-child(5) div { transition-delay: 0.5s } 
 
table tr:nth-child(1) td:nth-child(6) div { transition-delay: 0.6s } 
 
table tr:nth-child(1) td:nth-child(7) div { transition-delay: 0.7s } 
 
table tr:nth-child(1) td:nth-child(8) div { transition-delay: 0.8s } 
 
table tr:nth-child(1) td:nth-child(9) div { transition-delay: 0.9s } 
 
table tr:nth-child(1) td:nth-child(10) div { transition-delay: 1.0s } 
 

 
table tr:nth-child(2) td:nth-child(1) div { transition-delay: 1.1s } 
 
table tr:nth-child(2) td:nth-child(2) div { transition-delay: 1.2s } 
 
table tr:nth-child(2) td:nth-child(3) div { transition-delay: 1.3s } 
 
table tr:nth-child(2) td:nth-child(4) div { transition-delay: 1.4s } 
 
table tr:nth-child(2) td:nth-child(5) div { transition-delay: 1.5s } 
 
table tr:nth-child(2) td:nth-child(6) div { transition-delay: 1.6s } 
 
table tr:nth-child(2) td:nth-child(7) div { transition-delay: 1.7s } 
 
table tr:nth-child(2) td:nth-child(8) div { transition-delay: 1.8s } 
 
table tr:nth-child(2) td:nth-child(9) div { transition-delay: 1.9s } 
 
table tr:nth-child(2) td:nth-child(10) div { transition-delay: 2.0s } 
 

 

 

 
table tr:nth-child(3) td:nth-child(1) div { transition-delay: 2.1s } 
 
table tr:nth-child(3) td:nth-child(2) div { transition-delay: 2.2s } 
 
table tr:nth-child(3) td:nth-child(3) div { transition-delay: 2.3s } 
 
table tr:nth-child(3) td:nth-child(4) div { transition-delay: 2.4s } 
 
table tr:nth-child(3) td:nth-child(5) div { transition-delay: 2.5s } 
 
table tr:nth-child(3) td:nth-child(6) div { transition-delay: 2.6s } 
 
table tr:nth-child(3) td:nth-child(7) div { transition-delay: 2.7s } 
 
table tr:nth-child(3) td:nth-child(8) div { transition-delay: 2.8s } 
 
table tr:nth-child(3) td:nth-child(9) div { transition-delay: 2.9s } 
 
table tr:nth-child(3) td:nth-child(10) div { transition-delay: 3.0s } 
 

 

 
table tr:nth-child(4) td:nth-child(1) div { transition-delay: 3.1s } 
 
table tr:nth-child(4) td:nth-child(2) div { transition-delay: 3.2s } 
 
table tr:nth-child(4) td:nth-child(3) div { transition-delay: 3.3s } 
 
table tr:nth-child(4) td:nth-child(4) div { transition-delay: 3.4s } 
 
table tr:nth-child(4) td:nth-child(5) div { transition-delay: 3.5s } 
 
table tr:nth-child(4) td:nth-child(6) div { transition-delay: 3.6s } 
 
table tr:nth-child(4) td:nth-child(7) div { transition-delay: 3.7s } 
 
table tr:nth-child(4) td:nth-child(8) div { transition-delay: 3.8s } 
 
table tr:nth-child(4) td:nth-child(9) div { transition-delay: 3.9s } 
 
table tr:nth-child(4) td:nth-child(10) div { transition-delay: 4.0s } 
 

 
table tr:nth-child(5) td:nth-child(1) div { transition-delay: 4.1s } 
 
table tr:nth-child(5) td:nth-child(2) div { transition-delay: 4.2s } 
 
table tr:nth-child(5) td:nth-child(3) div { transition-delay: 4.3s } 
 
table tr:nth-child(5) td:nth-child(4) div { transition-delay: 4.4s } 
 
table tr:nth-child(5) td:nth-child(5) div { transition-delay: 4.5s } 
 
table tr:nth-child(5) td:nth-child(6) div { transition-delay: 4.6s } 
 
table tr:nth-child(5) td:nth-child(7) div { transition-delay: 4.7s } 
 
table tr:nth-child(5) td:nth-child(8) div { transition-delay: 4.8s } 
 
table tr:nth-child(5) td:nth-child(9) div { transition-delay: 4.9s } 
 
table tr:nth-child(5) td:nth-child(10) div { transition-delay: 5.0s } 
 

 

 
table tr:nth-child(6) td:nth-child(1) div { transition-delay: 5.1s } 
 
table tr:nth-child(6) td:nth-child(2) div { transition-delay: 5.2s } 
 
table tr:nth-child(6) td:nth-child(3) div { transition-delay: 5.3s } 
 
table tr:nth-child(6) td:nth-child(4) div { transition-delay: 5.4s } 
 
table tr:nth-child(6) td:nth-child(5) div { transition-delay: 5.5s } 
 
table tr:nth-child(6) td:nth-child(6) div { transition-delay: 5.6s } 
 
table tr:nth-child(6) td:nth-child(7) div { transition-delay: 5.7s } 
 
table tr:nth-child(6) td:nth-child(8) div { transition-delay: 5.8s } 
 
table tr:nth-child(6) td:nth-child(9) div { transition-delay: 5.9s } 
 
table tr:nth-child(6) td:nth-child(10) div { transition-delay: 6.0s } 
 

 

 
table tr:nth-child(7) td:nth-child(1) div { transition-delay: 6.1s } 
 
table tr:nth-child(7) td:nth-child(2) div { transition-delay: 6.2s } 
 
table tr:nth-child(7) td:nth-child(3) div { transition-delay: 6.3s } 
 
table tr:nth-child(7) td:nth-child(4) div { transition-delay: 6.4s } 
 
table tr:nth-child(7) td:nth-child(5) div { transition-delay: 6.5s } 
 
table tr:nth-child(7) td:nth-child(6) div { transition-delay: 6.6s } 
 
table tr:nth-child(7) td:nth-child(7) div { transition-delay: 6.7s } 
 
table tr:nth-child(7) td:nth-child(8) div { transition-delay: 6.8s } 
 
table tr:nth-child(7) td:nth-child(9) div { transition-delay: 6.9s } 
 
table tr:nth-child(7) td:nth-child(10) div { transition-delay: 7.0s } 
 

 

 
table tr:nth-child(8) td:nth-child(1) div { transition-delay: 7.1s } 
 
table tr:nth-child(8) td:nth-child(2) div { transition-delay: 7.2s } 
 
table tr:nth-child(8) td:nth-child(3) div { transition-delay: 7.3s } 
 
table tr:nth-child(8) td:nth-child(4) div { transition-delay: 7.4s } 
 
table tr:nth-child(8) td:nth-child(5) div { transition-delay: 7.5s } 
 
table tr:nth-child(8) td:nth-child(6) div { transition-delay: 7.6s } 
 
table tr:nth-child(8) td:nth-child(7) div { transition-delay: 7.7s } 
 
table tr:nth-child(8) td:nth-child(8) div { transition-delay: 7.8s } 
 
table tr:nth-child(8) td:nth-child(9) div { transition-delay: 7.9s } 
 
table tr:nth-child(8) td:nth-child(10) div { transition-delay: 8.0s } 
 

 

 
table tr:nth-child(9) td:nth-child(1) div { transition-delay: 8.1s } 
 
table tr:nth-child(9) td:nth-child(2) div { transition-delay: 8.2s } 
 
table tr:nth-child(9) td:nth-child(3) div { transition-delay: 8.3s } 
 
table tr:nth-child(9) td:nth-child(4) div { transition-delay: 8.4s } 
 
table tr:nth-child(9) td:nth-child(5) div { transition-delay: 8.5s } 
 
table tr:nth-child(9) td:nth-child(6) div { transition-delay: 8.6s } 
 
table tr:nth-child(9) td:nth-child(7) div { transition-delay: 8.7s } 
 
table tr:nth-child(9) td:nth-child(8) div { transition-delay: 8.8s } 
 
table tr:nth-child(9) td:nth-child(9) div { transition-delay: 8.9s } 
 
table tr:nth-child(9) td:nth-child(10) div { transition-delay: 9.0s } 
 

 

 
table tr:nth-child(10) td:nth-child(1) div { transition-delay: 9.1s } 
 
table tr:nth-child(10) td:nth-child(2) div { transition-delay: 9.2s } 
 
table tr:nth-child(10) td:nth-child(3) div { transition-delay: 9.3s } 
 
table tr:nth-child(10) td:nth-child(4) div { transition-delay: 9.4s } 
 
table tr:nth-child(10) td:nth-child(5) div { transition-delay: 9.5s } 
 
table tr:nth-child(10) td:nth-child(6) div { transition-delay: 9.6s } 
 
table tr:nth-child(10) td:nth-child(7) div { transition-delay: 9.7s } 
 
table tr:nth-child(10) td:nth-child(8) div { transition-delay: 9.8s } 
 
table tr:nth-child(10) td:nth-child(9) div { transition-delay: 9.9s } 
 
table tr:nth-child(10) td:nth-child(10) div { transition-delay: 10.0s } 
 

 

 
.round-button { 
 
    display:block; 
 
    width:60px; 
 
    height:60px; 
 
    line-height:50px; 
 
    border: 2px solid #f5f5f5; 
 
    border-radius: 50%; 
 
    color:#f5f5f5; 
 
\t cursor:pointer; 
 
    text-align:center; 
 
    text-decoration:none; 
 
    background:#A40205; 
 
    box-shadow: 0 0 3px gray; 
 
    font-size:20px; 
 
    font-weight:bold; 
 
\t margin-left: auto; 
 
\t margin-right:auto; 
 
    transition: 1s; 
 
} 
 

 
.round-button:hover { 
 
    background:#FB0206; 
 
\t width: 80px; 
 
\t height:80px; 
 
\t transform: rotate(360deg); 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Projet HTML</title> 
 
<link rel="stylesheet" href="animation+.css" type="text/css"> 
 
<script src="animation+.js"></script> 
 
<script src="jQuery_v2.2.4.js"></script> 
 
</head> 
 

 
<body> 
 
<div id="container"> 
 
<table > 
 
<tbody> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div> 
 

 
<button class="round-button" onclick="animation()">Start</button> 
 
</body> 
 
</html>

來源

2016-06-17 Bacha

退房動畫延遲CSS。如果每個單元格都有適當的延遲，你可能會得到你所尋求的效果。 – JonSG

對不起，我不明白。你能解釋更多嗎？ – Bacha

沒人能幫助嗎？ – Bacha

這裏是什麼，我在想一個精簡版。這將隨機顏色應用於從左上角到右下角大約一秒鐘級聯的每個單元。無論你的10種顏色策略是什麼，都可以增加，如果你願意，可以將其擴展到10x10。做了一個例子，我不確定現在這是最好的解決方案，但它會讓你走。轉換延遲並不像動畫延遲那麼成熟，所以你可能會製作10個動畫（每個顏色一個），並使用延遲而不是這個轉換的動畫，但這個概念是相似的。

function animation(){ 
 
    
 
    // 10 colors but given this demo is 4x4 only the first 4 are used.... 
 
    var colors = [ 
 
    "rgb(0,0,0)", 
 
    "rgb(255,0,0)", 
 
    "rgb(0,255,0)", 
 
    "rgb(0,0,255)", 
 
    "rgb(100,100,100)", 
 
    "rgb(125,125,125)", 
 
    "rgb(150,150,150)", 
 
    "rgb(175,175,175)", 
 
    "rgb(200,200,200)", 
 
    "rgb(225,225,225)" 
 
    ]; 
 
    
 
    Array.from(document.querySelectorAll("table td div")).forEach(function(item, index){ 
 
    // each row gets a color.... 
 
    var color = colors[ index % 4 ]; 
 
    item.style.backgroundColor = color; 
 
    }); 
 
}

body { width: 624px; margin-left: auto; margin-right: auto; line-height: 1; } 
 

 
table { padding: 0; border-collapse: collapse; } 
 
table td { height: 35px; width: 35px; padding: 0em; background-color:#F7F27F; } 
 
table td div { height:100%; width: 100%; transition: all 0.5s ease-in-out; } 
 

 
table tr:nth-child(odd) td:nth-child(odd) { background-color:#B0090C; } 
 
table tr:nth-child(even) td:nth-child(even) { background-color:#B0090C; } 
 

 
table tr:nth-child(1) td:nth-child(1) div { transition-delay: 0.1s } 
 
table tr:nth-child(1) td:nth-child(2) div { transition-delay: 0.2s } 
 
table tr:nth-child(1) td:nth-child(3) div { transition-delay: 0.3s } 
 
table tr:nth-child(1) td:nth-child(4) div { transition-delay: 0.4s } 
 

 
table tr:nth-child(2) td:nth-child(1) div { transition-delay: 0.5s } 
 
table tr:nth-child(2) td:nth-child(2) div { transition-delay: 0.6s } 
 
table tr:nth-child(2) td:nth-child(3) div { transition-delay: 0.7s } 
 
table tr:nth-child(2) td:nth-child(4) div { transition-delay: 0.8s } 
 

 
table tr:nth-child(3) td:nth-child(1) div { transition-delay: 0.9s } 
 
table tr:nth-child(3) td:nth-child(2) div { transition-delay: 1.0s } 
 
table tr:nth-child(3) td:nth-child(3) div { transition-delay: 1.1s } 
 
table tr:nth-child(3) td:nth-child(4) div { transition-delay: 1.2s } 
 

 
table tr:nth-child(4) td:nth-child(1) div { transition-delay: 1.3s } 
 
table tr:nth-child(4) td:nth-child(2) div { transition-delay: 1.4s } 
 
table tr:nth-child(4) td:nth-child(3) div { transition-delay: 1.5s } 
 
table tr:nth-child(4) td:nth-child(4) div { transition-delay: 1.6s } 
 

 
.round-button { 
 
    display:block; 
 
    width:60px; 
 
    height:60px; 
 
    line-height:50px; 
 
    border: 2px solid #f5f5f5; 
 
    border-radius: 50%; 
 
    color:#f5f5f5; 
 
    text-align:center; 
 
    text-decoration:none; 
 
    background:#A40205; 
 
    box-shadow: 0 0 3px gray; 
 
    font-size:20px; 
 
    font-weight:bold; 
 
\t margin-left: auto; 
 
\t margin-right:auto; 
 
\t 
 
} 
 

 
.round-button:hover { 
 
    background:#9E2C2E; 
 
}

<div id="container"> 
 
<table > 
 
<tbody> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
<tr> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
    <td><div></div></td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
</div> 
 

 
<button class="round-button"onclick="animation()">Start</button>

來源

2016-06-20 01:47:59 JonSG

**謝謝你**，很酷，**但是**，你可以讓顏色從第一塊瓷磚變成最後一塊（第一行），然後返回第二行的第一塊瓷磚，並做同樣的事情直到最後？ – Bacha

當然，我更新了延遲行 – JonSG

非常感謝，非常好 – Bacha

使用Java腳本創建表格以模擬光照動畫

回答

相關問題