纯JS代码实现5X5表格随机颜色闪动

最新推荐文章于 2022-03-21 00:41:39 发布

wave1996

最新推荐文章于 2022-03-21 00:41:39 发布

阅读量624

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_38374633/article/details/105467465

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>5X5表格</title>
	</head>
	<body id="body_table">
	</body>
	<script type="text/javascript">
		var tb = document.createElement("table");
		tb.style.width = "500px";
		tb.style.height = "500px";
		tb.border = "1";
		tb.cellSpacing = "0";
		tb.style.margin = "100px auto auto auto";
		for (var i = 1; i <= 5; i++) {
			var tr = document.createElement("tr");
			for (var j = 1; j <= 5; j++) {
				var td = document.createElement("td");
				tr.appendChild(td);
			}
			tb.appendChild(tr);
		}
		body_table.appendChild(tb);



		//5X5表格随机颜色闪动
		//获取单元格数组
		var tda = document.getElementsByTagName('td');

		setInterval(function() { //使用定时器
			start(); //调用函数
		}, 800) //设置时间

		//随机颜色
		function colors() {
			var rgb;
			var r = parseInt(Math.random() * 256);
			var g = parseInt(Math.random() * 256);
			var b = parseInt(Math.random() * 256);
			rgb = "(" + r + "," + g + "," + b + ")";
			return rgb;
		}

		function start() {
			for (var i = 0; i < tda.length; i++) { //每次随机颜色时遍历将背景设置好
				tda[i].style.background = "#fffcdd";
			}
			var arr = new Array(5); //创建数组容纳随机的单元格索引
			for (var i = 0; i < arr.length; i++) { //创建随机5个单元格的索引
				var a = parseInt(Math.random() * 25);
				console.log(a);
				//随机单元格索引放入数组
				arr[i] = a;
				for (var j = 0; j < i; j++) { //判断是否有随机数重复，若重复则返回上一步重新取数
					if (a == arr[j]) {
						i--;
					}
				}
			}
			for (var i = 0; i < arr.length; i++) {
				tda[arr[i]].style.background = "rgb" + colors(); //将随机的颜色赋给随机的单元格
			}
		}
	</script>
</html>

参考链接：https://www.jb51.net/article/106064.htm

https://blog.csdn.net/mo_jiu/article/details/80666531

wave1996

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
纯JS代码实现5X5表格随机颜色闪动

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>5X5表格</title> </head> <body id="body_table"> </body> <script type="text/j...
复制链接

扫一扫