我已将meteorolog json数据转换为数组并以表格形式显示。它工作,它显示。但是,我有风向问题。风向应显示为动画而不是数字。风速和风向应显示在一个表格单元格中。我想在一个单元格中显示。我想将风向转换为动画,如淡入或淡出。但是,我不知道如何为每个数组元素添加动画。
function createTable(){
var table = document.getElementById("wData"); /* */
var days = convertToDay(); /*days where Metrology data collected */
var windS = returnWSpeed() /*speed of wind */
var average = returnAveargeTempreatur(); /* average tempreature*/
var max = returnMaxTempreture(); /* maximum tempreture*/
var wd = returnWD(); /* wind direction*/
for(i = 0 ; i < 10; ++i){
var row = table.insertRow(i);
var cell1 = row.insertCell(0);
cell1.id = 'cell' + 0;
cell1.style.border = '1px solid black';
var cell2 = row.insertCell(1);
cell2.id = 'cell' + 1;
cell2.style.border = '1px solid black';
var cell3 = row.insertCell(2);
cell3.id = 'cell' + 2;
cell3.style.border = '1px solid black';
var cell4 = row.insertCell(3);
cell4.id = 'cell' + 3;
cell4.style.border = '1px solid black';
cell4.style.height ='80px'
cell1.innerHTML = days[i];
cell2.innerHTML = max[i];
cell3.innerHTML = average[i];
cell4.innerHTML = wd[i] + "<br />" + windS[i];/*animate wd[i]*/
}
}
答案 0 :(得分:0)
这是我的想法......
HTML:
var io = require('socket.io-client');
var socket;
onmessage = function(event) {
var data = event.data;
console.log('got a event');
if (typeof data === 'string') {
data = JSON.parse(data);
}
switch (data.type) {
case 'INIT_SOCKET':
try {
socket = io('xxxx', { transports: [ 'websocket' ], secure: true }); // this line causes the error
socket.on('connect', function () {
postMessage({
type: Consts.SOCKET_INITIALIZED
});
});
} catch(e) {
console.log('some error ', e);
}
break;
};
};
CSS:
<table id="tab101">
<tr>
<th>Day</th>
<th>Maximum temperature</th>
<th>Average temperature</th>
<th>Wind direction</th>
</tr>
<tbody id="wData"></tbody>
</table>
JS:
th,tr{
border: 1px solid black;
height: 50px;
padding: 15px;
text-align: left;
}
每1000毫秒使用类animWD显示或隐藏数据。