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移至下一个div。当你在最后一个时，你需要用parentElement.children[0]选择父母的第一个孩子。

以下是纯WebSockets的示例，但您应该能够使用Socket.io：

＆＃13;

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);
}

＆＃13;

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

＆＃13;

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

＆＃13;

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

2 个答案: