使用 Javascript 创建一个表格来模拟灯光动画

【问题标题】：Create a table to simulate a light animation using Java script使用 Javascript 创建一个表格来模拟灯光动画
【发布时间】：2016-06-23 11:53:49
【问题描述】：

如何创建一个类似的表 exemple of the table 模拟灯光动画。 动画是，点击开始按钮后，改变 逐渐从左到右瓷砖的颜色， 然后从上到下使用十种颜色的列表 不同的。 将不胜感激。

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

function animation(){
    var colors = [
					"rgb(0,0,0)",
					"rgb(255,0,0)",
					"rgb(0,255,0)",
					"rgb(0,0,255)",
					"rgb(100,0,100)",
					"rgb(125,125,0)",
					"rgb(0,150,150)",
					"rgb(175,175,175)",
					"rgb(200,0,100)",
					"rgb(1,0,100)",
					"rgb(225,225,225)"
				  ];
  
  Array.from(document.querySelectorAll("table td div")).forEach(function(item, index){
 
     var color = colors[ index % 11 ];
    item.style.backgroundColor = color;
  });
}
body { width: 450px; 
		margin-left: auto; 
		margin-right: auto; 
		 
	}


table td { height: 45px; 
			width: 45px; 
			padding: 0em; 
			background-color:#F7F27F; 
			
	}
/*table {border-collapse: collapse;
}*/
	
table td div { height:100%; 
				width: 100%; 
				transition: all 0.3s 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(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;
	cursor:pointer;
    text-align:center;
    text-decoration:none;
    background:#A40205;
    box-shadow: 0 0 3px gray;
    font-size:20px;
    font-weight:bold;
	margin-left: auto;
	margin-right:auto;
    transition: 1s;
}

.round-button:hover {
    background:#FB0206;
	width: 80px;
	height:80px;
	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>

【问题讨论】：

  • 查看 CSS 中的动画延迟。如果每个单元格都有适当的延迟，您可能会得到您想要的效果。
  • 对不起，我不明白。你能解释更多吗？
  • 没有人可以帮忙？？？

标签： javascript html css


【解决方案1】：

这是我所想的精简版。这将随机颜色应用于从左上角到右下角大约一秒钟级联的每个单元格。您可以使用任何 10 色策略进行扩充，如果您愿意，可以将其扩展到 10x10。做了一个例子，我现在不确定这是最好的解决方案，但它会让你继续前进。 transition-delay 不如 animation-delay 成熟，因此您可以制作 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;
	margin-left: auto;
	margin-right:auto;
	
}

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

【讨论】：

  • 谢谢哥们，这很酷，但是，你能把颜色从第一块瓷砖变成最后一块（第一行的）然后返回到第二行的第一个图块并做同样的事情直到结束？
  • 非常感谢，非常好
  • 但是@JonSG 如果我只想添加 10 种颜色，我该怎么做？
  • 你能添加一张你正在寻找的图片吗？
  • 我想要你所做的，但我想要 10 种颜色而不是随机颜色，
猜你喜欢
  • 2020-08-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2022-11-15
  • 2016-04-21
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode