Erstellen Sie eine Tabelle zum Simulieren einer Lichtanimation mit dem Java-Skript

-4

So erstellen Sie eine Tabelle wie exemple of the table, um eine Lichtanimation zu simulieren. Die Animation ist, nach einem Klick auf den Startknopf, ändern Sie allmählich die Farbe der Fliesen von links nach rechts, dann von oben nach unten mit einer Liste von zehn Farben anders. Werde dankbar für jede Hilfe.Erstellen Sie eine Tabelle zum Simulieren einer Lichtanimation mit dem Java-Skript

Ich habe den Code HTML und CSS, ich brauche 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>

Quelle

2016-06-17 Bacha

Check-out-Animation-Verzögerung in CSS. Wenn jede Zelle eine angemessene Verzögerung hat, erhalten Sie wahrscheinlich den gewünschten Effekt. – JonSG

Entschuldigung, ich verstehe nicht. Kannst du mehr erklären ? – Bacha

Niemand kann helfen ??? – Bacha

Hier ist eine abgespeckte Version von dem, was ich dachte. Dies wendet eine zufällige Farbe auf jede Zelle an, die über etwa eine Sekunde von links oben nach rechts unten kaskadiert wird. Sie können mit was auch immer Ihre 10-Farben-Strategie ist erweitern und kann dies auf 10x10 erweitern, wenn Sie möchten. Nachdem ich ein Beispiel gemacht habe, bin ich mir jetzt nicht sicher, ob das die beste Lösung ist, aber es wird dich in Schwung bringen. Die Übergangsverzögerung ist nicht so ausgereift wie die Verzögerung bei der Animation. Sie können also 10 Animationen erstellen (eine für jede Ihrer Farben) und eine Animation mit einer Verzögerung anstelle dieser Überblendung verwenden, aber das Konzept wäre ähnlich.

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>

Quelle

2016-06-20 01:47:59 JonSG

** Danke Mann ** das ist cool, ** aber **, können Sie die Farben von der ersten Kachel auf die letzte (der ersten Zeile) ändern und dann auf die erste Kachel der zweiten Zeile zurückkehren und das gleiche tun bis zum Ende ? – Bacha

sicher, ich aktualisiert die Verzögerung, um Zeile für Zeile zu tun – JonSG

Vielen Dank, sehr schön – Bacha

Erstellen Sie eine Tabelle zum Simulieren einer Lichtanimation mit dem Java-Skript

Antwort

Verwandte Themen