动画每个数组元素Javascript

时间:2016-12-22 16:33:44

标签: javascript jquery arrays animation

我已将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]*/
      }

  }

1 个答案:

答案 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显示或隐藏数据。