如何使用Javascript将流数据（已转换为颜色的数据）不断地推送到index.html中的连续div中？

Question

我试图将计算机屏幕变成一个网格，然后将数据（以颜色的形式）推送到网格的每个正方形中。 当一个正方形已满时，我想填充下一个。 我有使用Socket.io的数据流。 我将对以下有关如何调整Javascript以实现此功能的建议表示赞赏。

我的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>

我的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;
}

我的客户端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(',') + ')';

});

Answer 1

这是使用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];
 }
});

Answer 2

您可以使用.querySelector(query)选择div，然后使用.nextElementSibling移至下一个。 当您位于最后一个时，您需要使用parentElement.children[0]选择父级的第一个子级。

这是纯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>

如何使用Javascript将流数据（已转换为颜色的数据）不断地推送到index.html中的连续div中？

问题描述

2 个解决方案

解决方案1
1 2016-11-10 22:32:32

解决方案2
0 2016-10-06 11:00:52

如何使用Javascript将流数据（已转换为颜色的数据）不断地推送到index.html中的连续div中？

问题描述

2 个解决方案

解决方案1 1 2016-11-10 22:32:32

解决方案2 0 2016-10-06 11:00:52

解决方案1
1 2016-11-10 22:32:32

解决方案2
0 2016-10-06 11:00:52