我如何使用Javascript将不断的流数据(我已经转换为颜色)推送到index.html中的连续div中

我试图把电脑屏幕变成一个网格，然后把数据(以颜色的形式)推到网格的每个正方形中。当一个方格填满了，我想填下一个方格。我有数据流使用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(',') + ')';
});

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

您可以选择具有.querySelector(query)的div，然后移动到具有.nextElementSibling的下一个div。当你在最后一个时，你需要选择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>

相关内容

最新更新

热门标签：