如何使用Javascript将流数据（已转换为颜色的数据）不断地推送到index.html中的连续div中？
[英]How can I push constantly streaming data (which I have converted to color) into successive divs in my index.html using Javascript?
问题描述
I am trying to turn the computer screen into a grid and then push data (in the form of color) into each square of the grid. 
我试图将计算机屏幕变成一个网格，然后将数据（以颜色的形式）推送到网格的每个正方形中。 When one square is full I want to fill the next one. 当一个正方形已满时，我想填充下一个。 I have the data streaming in using Socket.io. 我有使用Socket.io的数据流。 I'd appreciate some suggestions on how to adjust the Javascript below to enable this? 我将对以下有关如何调整Javascript以实现此功能的建议表示赞赏。
My html is a series of rows that look like this: 我的html是一系列看起来像这样的行：
<body>
<div class="row">
<div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
</div>
My CSS: 我的CSS：
body {
text-align: center;
width: 100%;
height: 100%;
overflow: hidden;
}
.row {
line-height: 0;
font-size: 0;
overflow: hidden;
height: 50px;
width: 100%;
}
.row > div {
display: inline-block;
width: 50px;
height: 50px;
}
My client-side javascript: 我的客户端javascript：
var socket = io()
socket.on('connect', function () {
console.log('client is connected');
})
socket.on('color', function (data) {
const { rgb } = data
document.body.style.backgroundColor = 'rgb(' + [rgb[0], rgb[1], rgb[2]].join(',') + ')';
});
2 个解决方案
解决方案1
1 2016-11-10 22:32:32
Here is the new code using socket.io: 这是使用socket.io的新代码：
var socket = io()
const div = document.querySelector(".row>div");
socket.on('connect', function () {
})
socket.on('color', function (data) {
const { rgb } = data
div.style.backgroundColor = 'rgb(' + [rgb[0], rgb[1], rgb[2]].join(',') + ')';
if (div.nextElementSibling) {
div = div.nextElementSibling;
}
else {
div = div.parentElement.children[0];
}
});
解决方案2
0 2016-10-06 11:00:52
You can select your div with .querySelector(query) and then move to the next one with .nextElementSibling . 您可以使用.querySelector(query)选择div，然后使用.nextElementSibling移至下一个。 When you are at the last one you need to select the first child of the parent with parentElement.children[0] . 当您位于最后一个时，您需要使用parentElement.children[0]选择父级的第一个子级。
Here is an example with pure WebSockets, but you should be able to make it work with Socket.io: 这是纯WebSockets的示例，但是您应该能够使其与Socket.io一起使用：
var div = document.querySelector(".row>div"); // select the first div var websocket = new WebSocket("wss://echo.websocket.org/"); websocket.onmessage = function(evt) { var rgb = JSON.parse(evt.data); // change the color of the div div.style.backgroundColor = 'rgb(' + [rgb[0], rgb[1], rgb[2]].join(',') + ')'; if (div.nextElementSibling) // if a div is not last, move to the next one div = div.nextElementSibling; else // if the div is last move to the first one div = div.parentElement.children[0]; }; // code just to make the demo work and trigger the onmessage event websocket.onopen = function(evt) { n = 0; setInterval(function() { websocket.send(JSON.stringify([255*((n>>2)&1), 255*((n>>1)&1), 255*(n&1)])); n++; }, 100); }
body { text-align: center; width: 100%; height: 100%; overflow: hidden; } .row { line-height: 0; font-size: 0; overflow: hidden; /*height: 50px;*/ width: 100%; } .row > div { display: inline-block; width: 50px; height: 50px; }
<div class="row"> <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div> </div>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.