用javascript实现的WEB色彩参考-优快云博客

本文链接：https://blog.youkuaiyun.com/xcrn75416/article/details/83882795


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
	<title> 配色方案参考表 </title>
		<script type="text/javascript">
			function show() {
				var tb = document.getElementById('tb');

				var num = ['0','1','2','3','4','5','6','7','8','9','a','b','c','d','e','f'];

				var cAll;

				for (var i1 = 0; i1 < 16; i1 += 4){
					for (var i2 = 0; i2 < 16; i2 += 4){
						for (var i3 = 0; i3 < 16; i3 += 4){
							for (var i4 = 0; i4 < 16; i4 += 4){
								for (var i5 = 0; i5 < 16; i5 += 4){
									for (var i6 = 0; i6 < 16; i6 += 4){
										cAll = num[i6] + num[i5] + num[i4] + num[i3] + num[i2] + num[i1];

										var td1 = document.createElement('td');
										var td2 = document.createElement('td');
										td1.innerHTML = '#' + cAll;
										td2.style.backgroundColor = '#' + cAll;
										var tr1 = document.createElement('tr');

										tr1.appendChild(td1);
										tr1.appendChild(td2);

										tb.appendChild(tr1);
									}
								}
							}
						}
					}
				}
			}

		</script>
		<style type="text/css">
			body{
				background-color:#000000;
				color:#ffffff;
			}
			#tb{
				margin:0px auto;
				text-align:center;
			}
		</style>
	</head>

	<body onload="show();">
		<table id="tb" width="600">
			<tr>
				<td style="background-color:#ffffff;color:#000000;">Value</td><td style="background-color:#ffffff;color:#000000;">ColorView</td>
			</tr>
		</table>
	</body>
</html>